Accordion

Interactive Demo

This demo lets you preview the accordion component, its variations, and configuration options.

Accordion Variations

There are 2 types of Accordion variations.

1. Panel

Panel Accordion allows the user to select any area of the panel to expand additional details and selecting it again, collapses it. Panel could consist of text panel or custom panel where user can use their local components. Panels can be grouped with related information. Panels have an optional border and may have the chevron on the left or the right side of the heading.

2. Text

Text Accordion allows the user to press a button to show additional details.

What’s New

1. Accordion has been updated to v7 styles and sizes to fit 8x system.
2. Accordion has been updated to have chevron on the right side of the container.
3. Figma: Users are able to swap panel to be text or custom where they can use their local component.

See full release notes