Accordion

An accordion shows and hides sections of related content.

#Default

Select a heading to open or close its section.

Routing

New conversations go to the bot before they reach a rep.

Business hours

Escalation

import { Accordion } from '@wolf-rayet/react';

<Accordion
  sections={[
    {
      id: 'routing',
      title: 'Routing',
      defaultOpen: true,
      content: <p style={{ margin: 0 }}>New conversations go to the bot before they reach a rep.</p>,
    },
    {
      id: 'hours',
      title: 'Business hours',
      content: <p style={{ margin: 0 }}>Monday to Friday, 9 a.m. to 6 p.m.</p>,
    },
    {
      id: 'escalation',
      title: 'Escalation',
      content: <p style={{ margin: 0 }}>Anything unanswered for 30 minutes goes to a supervisor.</p>,
    },
  ]}
/>

#With counts

Put a badge or a lozenge on a heading to say what is inside.

Open18

18 conversations are waiting.

Escalated3

import { Accordion, Badge, Lozenge } from '@wolf-rayet/react';

<Accordion
  sections={[
    { id: 'open', title: 'Open', count: <Badge appearance="primary">18</Badge>, defaultOpen: true, content: <p style={{ margin: 0 }}>18 conversations are waiting.</p> },
    { id: 'escalated', title: 'Escalated', count: <Lozenge appearance="removed">3</Lozenge>, content: <p style={{ margin: 0 }}>3 conversations need a supervisor.</p> },
  ]}
/>