Collapsible

Default


Icon Size


Prop

This kit uses icon sizes. If you don't give it a size, it will default to medium. This can be replaced with the sizes below:

  • lg xs sm 1x 2x 3x 4x 5x 6x 7x 8x 9x 10x
Icon Color


Prop

This kit uses default color by default, and can be replaced with colors below:

  • light lighter success error link
Custom Icons


Prop

The icon prop allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when collapsed (chevron-down), and the second value will replace the default icon when expanded (chevron-up). icon also allows you to pass it a single icon as a string, in which case the icon will not toggle with the collapsible state.

useCollapsible Hook


The collapsed prop allows you to toggle the collapsible with external controls (like buttons) when used in conjunction with our useCollapsible hook.

NOTE: you must import and declare the useCollapsible hook then pass its state to the collapsed prop of any Collapsible you wish to manage with the external control. See our code example for details.

Custom Main Section


Optionally replace your Collapsible.Main with any component to customize your Main section's contents and/or style. This gives you full control over that subcomponent. For example, here we are using global props to make that custom Main 'sticky' on scroll.

NOTE: Custom main sections requires the useCollapsible hook to ensure the collapsible's toggle action works correctly.

Custom Main Section With Icon


When using a custom Main Section, you can also use the optional Collapsible.Icon.

NOTE: The optional icon subcomponent must receive the collapsed state of the collapsible in order to toggle correctly. It also accepts all icon-related props (icon, size, and color) for further customization. If none of these are specified, the default icon will be rendered.

No Icon



Available Props