Expanders

Accordion

Accordion is a header which can be clicked to hide or reveal additional content.

The level prop states the heading level for assistive technologies.

You can set the Accordion to be open by default using the openByDefault prop.

If you need to use a custom heading, pass in a headingComponent:

The background, text colours and padding of the accordion can also be specified

Expander

Expander is a button that can be clicked to hide or reveal additional content.

You can supply a onToggle callback function to take action when the Expander is opened: