Accordion

Accordion is a compound component for grouped expandable sections that share one root state model and item-level parts for headers, triggers, icons, and content.

Storybook Source Figma

Overview

Accordion styling is split across the root list, the trigger, the content spacing, and the icon rotation state. The public styling contract is small and relies heavily on theme tokens and inherited typography.

Public CSS Variables

Orders ship in 2–5 business days.

Variable	Value	Affects
Focus outline color.`AccordionTrigger`		No visible change in this state
Open content bottom spacing.`AccordionContent`		No visible change in this state
Size-driven trigger padding.`AccordionTrigger`	—	No visible change in this state
Open and close rotation timing.`AccordionIcon`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Accordion: resets list layout and spacing.
AccordionTrigger: controls full-width layout, inherited typography, and focus ring.
AccordionContent: adds open-state spacing rather than owning a large visual surface.
AccordionIcon: rotates on open state and inherits surrounding color.

State And Variant Interaction

Size variants map to different trigger paddings.
Open state mostly affects icon rotation and content spacing rather than colors.
Rich trigger content should preserve spacing and full-width alignment even when badges or counters are added.

Examples

.compactAccordion {
  --spacing-6: 12px;
  --spacing-7: 14px;
  --spacing-8: 16px;
}

.brandAccordion {
  --focus-color: var(--fills-primary);
  --transition-state-delay: 180ms;
}

Do Not Override

Do not remove the trigger focus outline without a replacement.
Do not shrink the trigger hit area until only the text or icon feels clickable.
Do not treat icon rotation as the only open-state signal if labels are already ambiguous.