Collapsable

Primitives

This package exposes a number of primitives that can be used to compose collapsable content.

Collapsable

This is the root primitive of a Collapsable.

The open/closed state is controlled by the consumer.

Basic usage

const [isOpen, setIsOpen] = useState(false)
<Collapsable isOpen={isOpen} setIsOpen={setIsOpen}>
  {/* Collapsable primitives */}
</Collapsable>

Collapsable.Header

This primitive houses the heading and the trigger.

Basic usage

<Collapsable.Header>{/* customer header content */}</Collapsable.Header>

NOTE: The trigger for the open state toggle can be configured to be the icon at the right or the whole header.

Default trigger

Header trigger

Custom trigger icon

Collapsable.Content

This primitive houses the content that can be toggled.

Basic usage

You can put any type of content in here except large forms.

<Collapsable.Content>{/* custom content */}</Collapsable.Content>

Recipes

Text content

Filters