Accordion, Asgard Docs

Data display

Progressively disclose content.

Collapsible accordion panel with smooth expand/collapse animations.

Key features:

Controlled (expanded) and uncontrolled (defaultExpanded) modes
Variants: plain, outlined, filled
Semantic colors, optional icons, and elevation shadows
Compose multiple panels with AccordionGroup for exclusive mode

Loading preview…

When to use it

FAQs and help content
Grouped settings sections
Collapsible detail panels
One-open-at-a-time vs allow-multiple groups

Properties

Prop	Type	Default	Description
`title`	`string`	—	Header title text
`children`	`ReactNode`	—	Content revealed when expanded
`expanded`	`boolean`	—	Controlled expanded state
`defaultExpanded`	`boolean`	`false`	Initial expanded state (uncontrolled)
`onChange`	`(expanded: boolean) => void`	—	Called when expand/collapse state changes The handler receives the new value directly, NOT a DOM event (write onChange={(v) => setX(v)}, not e.target.value).
`variant`	`'plain' \| 'outlined' \| 'filled'`	`'plain'`	Visual style
`type`	`'primary' \| 'secondary' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'primary'`	Semantic color type
`disabled`	`boolean`	`false`	Disable expand/collapse interaction
`elevation`	`boolean`	`false`	Add a subtle box shadow
`icon`	`ReactNode`	—	Custom icon displayed in the header
`summary`	`ReactNode`	—	Additional summary content in the header

Notes

Compose multiple Accordion components in an AccordionGroup; set allowMultiple to keep more than one open at once.
The filled variant uses the semantic color as background.

Presets