• Disclosure For a lighter visual treatment.
  • Tabs For a horizontal selection of multiple content panels.
  • Dialog For exposing a smaller amount of content in a modal.
  • Drawer For exposing a larger amount of content in a modal.
You can customise the size and tone props, and optionally set the dividers prop to false.
While we aim to provide sensible defaults, you can also provide a custom space value to adjust the spacing between items. Note that, to ensure adequate space for touch targets, the space prop only accepts values of medium, large and xlarge.
Add a Badge alongside the label of the AccordionItem using the badge prop.
For decoration or help distinguishing between accordion items, an icon can be provided. This will be placed to the left of the label.
An AccordionItem, by default, manages its own state internally. If you’d like to take control of the state, you can do so using the expanded and onToggle props.