Components / Data display

Divider

Use a divider to separate or group content.

Figma

The Figma reference for Divider will appear here once the design link is added.

Figma component

Storybook

Interactive examples for Divider will render here once the Storybook link is wired in.

Storybook component story

Best practices

  • Use a divider to reinforce grouping that isn’t already clear from spacing alone.
  • Prefer whitespace first; add a divider only when it improves scannability.

Do’s and don’ts

Do

Use a divider to mark a meaningful boundary between sections.

Don’t

Scatter dividers between every element — it adds visual noise.

Related components