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.


Available Props