Accordion

1. Types by position

Accordions use a toggle icon to indicate whether a section is expanded or collapsed. In many implementations, this icon also serves as the clickable trigger for toggling the section open or closed. The position of the toggle icon can vary depending on the layout and interaction needs.

Left-aligned toggle are typically used when the right side of the accordion header contains other interactive elements like action buttons. Placing the icon on the left avoids visual and functional conflict, helping users clearly distinguish between navigation and actions. In this arrangement, a right-pointing arrow usually represents the collapsed state, while a downward-pointing arrow indicates that the section is expanded. 

Right-aligned toggle are more suitable when the header contains only text, with no additional actions. This layout offers a cleaner, more balanced appearance. In such cases, a downward-pointing arrow often indicates a collapsed section, and an upward-pointing arrow signals that the section is expanded.

The choice between left or right alignment should be guided by the content structure and the presence of other interactive elements, ensuring a seamless and intuitive user experience.

2. Types by function

Basic accordion is suitable for simple use cases where users primarily need to view information without the need for additional actions or interactions. It features a header containing only a title and a toggle icon, with the entire header serving as the interactive area to toggle the accordion. It may also include additional contextual information in its header, like metadata, status indicator, etc. 

Interactive accordion is designed for use cases that require quick access to secondary actions. Its header includes additional action items alongside the title and toggle icon. For this type, the toggle icon serves as the only interactive area to expand or collapse the accordion, to prevent accidental toggling when interacting with action items. Clear visual cues and hover states are provided to differentiate between actionable elements and the toggle area.

3. Types by style

There are 4 different UI styles: separated, grouped, split, borderless

The chevron icon—specifically the up and down chevron—is the default icon set for the Coral accordion component and is also the most commonly used option. However, several other icon choices are available and can be used as shown below.

Accordion has 5 states: collapsed, expanded, hover, focused, disabled

The Coral system provides two accordion size options: standard and loose. These density options differ in vertical and horizontal padding, as well as the title font size. The width of the accordion should fill the width of the area it is used in.