Accordion

The Accordion component allows you to show and hide content sections with expand and collapse interactions.

Usage & Examples

Default

This is the content revealed when expanded.

default.tsx
<Accordion title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

Visual variants

Themes

primary

This is the content revealed when expanded.

secondary

This is the content revealed when expanded.

tertiary

This is the content revealed when expanded.

quaternary

This is the content revealed when expanded.

States

success

This is the content revealed when expanded.

warning

This is the content revealed when expanded.

error

This is the content revealed when expanded.

info

This is the content revealed when expanded.

Sizes

xs

This is the content revealed when expanded.

small

This is the content revealed when expanded.

medium

This is the content revealed when expanded.

large

This is the content revealed when expanded.

Variants

solid

This is the content revealed when expanded.

outline

This is the content revealed when expanded.

glass

This is the content revealed when expanded.

Rounding

none

This is the content revealed when expanded.

medium

This is the content revealed when expanded.

large

This is the content revealed when expanded.

Shadows

none

This is the content revealed when expanded.

light

This is the content revealed when expanded.

strong

This is the content revealed when expanded.

visual-variants.tsx
// Themes
<Accordion theme="primary" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion theme="secondary" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion theme="tertiary" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion theme="quaternary" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

// States
<Accordion state="success" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion state="warning" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion state="error" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion state="info" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

// Sizes
<Accordion size="xs" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion size="small" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion size="medium" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion size="large" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

// Variants
<Accordion variant="solid" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion variant="outline" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion variant="glass" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

// Rounding
<Accordion rounding="none" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion rounding="medium" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion rounding="large" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

// Shadows
<Accordion shadow="none" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion shadow="light" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
<Accordion shadow="strong" title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

Interaction states

Disabled

This is the content revealed when expanded.

Loading
interaction-states.tsx
// Disabled
<Accordion disabled title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>
// Loading
<Accordion loading title="Default Accordion">
    <p>This is the content revealed when expanded.</p>
  </Accordion>

Props API

32 props
Columns
Accordion props API
Default
Description
aria-describedbystringNoaria—ID reference for describing the accordion toggle button. This can supplement or replace the generated description ID.
aria-labelstringNoaria—Accessible label for the accordion toggle button. Useful when the visible title is not descriptive enough.
aria-labelledbystringNoaria—ID reference for labeling the accordion toggle button. Prefer this when an external visible label already exists.
asyncContentbooleanNopropsfalseDeprecated compatibility API that temporarily simulates loading for one second each time the accordion opens.
childrenReactNodeNoprops—The content to display when the accordion is expanded.
classNamestringNostyling—Additional custom class names for the wrapper element.
customCollapsedIconReactNodeNoprops—Custom icon to display when the accordion is collapsed.
customExpandedIconReactNodeNoprops—Custom icon to display when the accordion is expanded.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultExpandedbooleanNopropsfalseIf true, the accordion is initially expanded (uncontrolled mode).
descriptionstringNoprops—Accessible description. This can be announced to assistive technologies via aria-describedby.
disableCollapsebooleanNopropsfalseIf true, the accordion can be opened but cannot be collapsed by user action.