Accordion

Updated: June 30, 2026

A collapsible container that allows users to expand and collapse sections of content, helping to organize information in a compact way. It's useful for FAQs, navigation menus, and any content that benefits from progressive disclosure.

Accordion

Example

Example content

Example

<Column fillWidth>
	<Accordion title="Example" open>
		<Text onBackground="neutral-weak">
			Example content
		</Text>
	</Accordion>
	<Accordion title="Example">
		<Text onBackground="neutral-weak">
			Example content
		</Text>
	</Accordion>
</Column>

API reference

Prop	Type	Default
titlerequired	React.ReactNode	—
children	React.ReactNode	—
icon	IconName	chevronDown
iconRotation	number	180
size	lms	m
radius	xssmlxlfull	m
open	boolean	false
onToggle	() => void	—
className	string	—
style	React.CSSProperties	—
headerProps Props forwarded to the header row.	React.ComponentProps<typeof Row>	—
contentProps Props forwarded to the content column.	React.ComponentProps<typeof Column>	—
toggleOnHeaderClick Whether clicking anywhere in the header toggles the panel.	boolean	true
…and every FlexProps prop	inherited	—

Interaction

The accordion title area shows a pointer cursor, indicating it's clickable for expand/collapse.

Methods

The Accordion component exposes the following methods through a ref:

Method	Description
toggle()	Toggles the accordion between open and closed states
open()	Opens the accordion, making its content visible
close()	Closes the accordion, hiding its content

ComponentsDialog

ComponentsAccordionGroup

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club