SOROUSH.DESIGN
Design SystemMarkdownStyled System

Accordion

A heading that opens and closes a region of content.

Source

A heading that opens and closes a region of content. The first child is the AccordionSummary - a button in a heading - and the rest is the region it opens: a role="region" named by the summary, which in turn carries aria-expanded and aria-controls. The region opens and closes with Collapse, or the transition given. Open or closed it owns, until isExpanded takes it over.

import {
  Accordion,
  AccordionActions,
  AccordionDetails,
  AccordionSummary,
} from '@soroush.tech/design-system/Accordion'

;<Accordion>
  <AccordionSummary>Shipping</AccordionSummary>
  <AccordionDetails>It leaves on Monday.</AccordionDetails>
  <AccordionActions>
    <Button variant="text">Track</Button>
  </AccordionActions>
</Accordion>

Examples

Default

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = {}

<Accordion key={String(args.defaultExpanded)} {...args}>
  <AccordionSummary>Shipping</AccordionSummary>
  {details}
</Accordion>

Expanded

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = { defaultExpanded: true }

<Accordion key={String(args.defaultExpanded)} {...args}>
  <AccordionSummary>Shipping</AccordionSummary>
  {details}
</Accordion>

With Actions

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = { defaultExpanded: true }

<Accordion {...args}>
  <AccordionSummary>Shipping</AccordionSummary>
  {details}
  <AccordionActions>
    <Button variant="text" size="sm">
      Cancel
    </Button>
    <Button size="sm">Save</Button>
  </AccordionActions>
</Accordion>

Disabled

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = { disabled: true }

<Accordion {...args}>
  <AccordionSummary>Shipping</AccordionSummary>
  {details}
</Accordion>

Without Gutters

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = { defaultExpanded: true, hasGutters: false }

<Accordion {...args}>
  <AccordionSummary>Shipping</AccordionSummary>
  {details}
</Accordion>

Custom Icon

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = {}

<Accordion {...args}>
  <AccordionSummary expandIcon={<Icon name="chevron_right" size="1em" color="inherit" />}>
    Shipping
  </AccordionSummary>
  {details}
</Accordion>

Controlled State

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

const args: Partial<AccordionProps> = {}

<Controlled {...(args as { children?: never })} />

Group

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

<AccordionGroup isExclusive>
  {titles.map((title) => (
    <Accordion key={title}>
      <AccordionSummary>{title}</AccordionSummary>
      {details}
    </Accordion>
  ))}
</AccordionGroup>

Attached

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

<AccordionGroup variant="attached" isExclusive>
  {titles.map((title) => (
    <Accordion key={title}>
      <AccordionSummary>{title}</AccordionSummary>
      {details}
    </Accordion>
  ))}
</AccordionGroup>

Group Of Several

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

Content that opens and closes. Its height is measured as it moves, and left to it once it is open.

<AccordionGroup>
  {titles.map((title, index) => (
    <Accordion key={title} disabled={index === 1}>
      <AccordionSummary>{index === 1 ? `${title} (off)` : title}</AccordionSummary>
      {details}
    </Accordion>
  ))}
</AccordionGroup>