• 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.
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.