Components / Accordion
Accordion
Collapsible content sections — basic, single, multiple, nested, compact, and borderless.
Core behaviors
How items expand and collapse.
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
Basic accordion
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
Single accordion
Only one item open at a time.
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
Multiple accordion
Several items can stay open.
Presentation variants
Icons, badges, and density.
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
With icon
Manage incoming and historical orders.
With badge
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
Compact accordion
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
Borderless accordion
Contexts
Where accordions are typically used.
Open Orders from the sidebar, click New order, choose a channel, and confirm the items. The order is instantly available in the dashboard feed.
FAQ accordion
Invoices, plans, and payment methods.
Passwords, sessions, and two-factor authentication.
Invite members and manage roles.
Nested accordion
Settings grouped by category.
Accordion card
A richer surface variant.
Company name, timezone, and locale preferences.
Settings accordion card
