Accordion

The Accordion component can be used to group information, reveal and hide content.

OverviewPropertiesUsage

Colors

The accordion comes in five colors.

Neutral

• Use the neutral-colored accordion as the default.

Primary

• Use the primary-colored accordion on primary backgrounds. For example, when placing accordions in a primary-colored Container.

Success

• Use the success-colored accordion on success backgrounds. For example, when placing accordions in a success-colored Container.

Warning

• Use the warning-colored accordion on warning backgrounds. For example, when placing accordions in a warning-colored Container.

Critical

• Use the critical-colored accordion on critical backgrounds. For example, when placing accordions in a critical-colored Container.

Size

The accordion comes in two sizes: default and condensed.

Default

• Use as the default size.

Condensed

• Use the condensed size in compact layouts or when there isn't enough space for a default-sized accordion.

Trigger position

End

• Position the trigger at the end of the accordion if the collapse/expand feature is considered a nice-to-have and non-essential functionality. For example, allowing users to collapse large surfaces if they don't need its content frequently.
• Position the trigger at the end of the accordion to align the label and content vertically with the surrounding elements. For example, a headline above the accordion.

Start

• Position the trigger at the start of the accordion if the collapse/expand feature is an essential functionality. For example, in an FAQ section where all items are collapsed initially.

Customizing sections

• By default, the accordion sections are separated by dividers. Hide the dividers if you're providing your own means of separation. For example, if you wrap individual sections in a Surface or Container.

Interactivity

• By default, the entire accordion header is interactive. This means clicking on either the label or the trigger will collapse/expand the accordion.
• If the collapse/expand feature isn't considered an essential functionality or there are interactive elements inside the label, it's possible to only make the trigger interactive.

Expanding single vs. multiple sections

The accordion supports expanding either one or multiple sections at a time.

Single expand

• Use the single-expand behavior if users should focus on one section at a time.

Multi expand

• Use the multi-expand behavior if users are likely to compare information across multiple sections.