Skip to content
Nexus Application Design nadesign

Separator

A <Separator> is a thin divider — 1px in token color border — that breaks a region into chunks of related content.

import from "@na/ui/components/separator" ▶ Open in Storybook packages/ui/src/components/separator.tsx

When to use

  • Between groups of menu items in a dropdown.
  • Between sections of a settings card.
  • Vertical separator between toolbar buttons.

Don’t use Separator for: every paragraph break (spacing already does that), the border around a card (use border on the Card itself), or as decoration where there’s no semantic split.

Horizontal

Section A

Section B

<p>Section A</p>
<Separator className="my-3" />
<p>Section B</p>

Vertical

Vertical separators must live inside a container with explicit height (flex parent, fixed height, etc.).

Inbox
Sent
Archive
<div className="flex h-6 items-center gap-3">
  <span>Inbox</span>
  <Separator orientation="vertical" />
  <span>Sent</span>
</div>

API

Prop Type Default Description
orientation "horizontal" | "vertical" "horizontal" Vertical requires the parent to define the height (flex, fixed, h-*).
decorative boolean true When true, hides from screen readers (visual divider only). Set false when the separator carries semantic meaning.
className string — Forwarded.

Design guidelines

✓ Do

  • Use Separator inside a region with a clear semantic split — between groups, not between adjacent rows.
  • Use `decorative={false}` when the divider matters semantically (e.g., between conceptually-different list groups).

✗ Don't

  • Stack two separators with whitespace between. One divider does the job.
  • Place a separator at the very top or bottom of a region — that's a border on the parent's job.

Accessibility

  • Defaults to role="none" (decorative). Sets role="separator" and aria-orientation when decorative={false}.
  • 1px height/width but the visible color comes from border token, AA-contrast against background.
  • Card — Borders that group content come from Card, not Separator.
  • DropdownMenu — Internally uses Separator between menu groups.

▶ Open Separator stories in Storybook