#Accordion

Stacks sections behind their own headers and opens each on demand — reach for Tabs when a few primary sections get switched between often, and leave content on the page when people read most of it anyway. primary and secondary are inline rows for grouping; section is the bordered panel, and the only variant with room for AccordionActions.

Source · Storybook

#Usage

import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';

#Examples

#Secondary

A 24px row in small medium-weight muted type with no hover fill, for dense or nested groups where the header should sit behind the content it labels.

#Section

section draws each item as a bordered panel row — title left, chevron right — and the title takes inline content, here a NumericBadge carrying a count.

#Section with actions

AccordionActions renders beside the trigger rather than inside it, so buttons in the header act on the section without toggling it open.

#Long title primary

Titles truncate to one line rather than wrapping — the row is a fixed height, so reword a long header instead of relying on the ellipsis.

#Long title secondary

The same 320px column at secondary size, where smaller type and no row padding leave a little more of the title visible before the ellipsis.

#Multiple

multiple keeps several sections open at once, for when people reference sections on their own terms — not when the sections have to be read side by side, which is a layout rather than an accordion.

#Disabled

disabled on a single AccordionItem fades the row and blocks its toggle while the rest stay live; the same prop on Accordion locks every row at once.

#Props

#AccordionActions

#AccordionContent

#AccordionItem

#AccordionTrigger

#Explorer