> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.
# 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](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Accordion) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-accordion--overview)
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';
export const Primary = () => (
Title{sampleText}Title{sampleText}
);
```
## Usage
```tsx
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.
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';
export const Secondary = () => (
Title{sampleText}Title{sampleText}
);
```
### 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.
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { Text } from '@wallarm-org/design-system/Text';
export const Section = () => (
Title 2{sampleText}
Title 2{sampleText}
);
```
### 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.
```tsx
import { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Button } from '@wallarm-org/design-system/Button';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { Text } from '@wallarm-org/design-system/Text';
export const SectionWithActions = () => (
Title 2{sampleText}
Title 2{sampleText}
);
```
### 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.
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';
export const LongTitlePrimary = () => (
{longTitleText}{sampleText}
);
```
### 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.
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';
export const LongTitleSecondary = () => (
{longTitleText}{sampleText}
);
```
### 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.
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';
export const Multiple = () => (
);
```
### 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.
```tsx
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@wallarm-org/design-system/Accordion';
import { Text } from '@wallarm-org/design-system/Text';
export const Disabled = () => (