Separator

Visual Hierarchy

Separators create visual breaks that help users scan and group related content. Use them sparingly to avoid visual clutter. A single bg-border separator is subtle enough for most use cases. Reserve thicker or colored separators (e.g., bg-primary) for major section boundaries.

Spacing & Layout

Add consistent spacing around separators using my-4 or my-6 for horizontal separators. For vertical separators, wrap items in a flex items-center container with space-x-4 for uniform gaps. Vertical separators need an explicit parent height (e.g., h-5).

Responsive Behavior

Horizontal separators scale naturally to full container width. Vertical separators may need to switch to horizontal on smaller screens. Use responsive classes like hidden md:block to conditionally show vertical separators. Consider replacing separator-divided inline layouts with stacked layouts on mobile.

Color & Contrast

The separator uses the bg-border semantic token, which adapts to light and dark modes automatically. Avoid hardcoding colors; instead use semantic tokens like bg-muted or bg-primary for alternative separator styles. Ensure sufficient contrast against the background for visibility.

Keyboard Navigation

• Tab -- Separators are not focusable and do not appear in the tab order
• Arrow Keys -- No keyboard interaction; separators are non-interactive elements
• When used in toolbars, separators group adjacent controls without interrupting keyboard flow

Screen Reader Support

• Decorative separators (decorative=true) are hidden from assistive technology entirely
• Semantic separators (decorative=false) expose role="separator"
• Screen readers announce semantic separators as content boundaries
• The aria-orientation attribute is set automatically based on the orientation prop

Decorative vs Semantic

By default, separators are decorative (decorative=true) and use role="none", making them invisible to screen readers. Set decorative=false when the separator conveys a meaningful content boundary, such as separating distinct sections in a form or toolbar. Use decorative separators for purely visual spacing.

WAI-ARIA Compliance

Built on @radix-ui/react-separator, which follows the WAI-ARIA separator role specification. Semantic separators receive role="separator" and the correct aria-orientation value. Decorative separators use role="none" to be fully transparent to assistive technology.

ARIA Attributes

{/* Default decorative separator - no ARIA role */}
<Separator />

{/* Semantic separator - gets role="separator" */}
<Separator decorative={false} />

{/* Vertical semantic separator with orientation */}
<Separator
  orientation="vertical"
  decorative={false}
/>

{/* Separator in a toolbar context */}
<div role="toolbar" aria-label="Formatting options">
  <button>Bold</button>
  <button>Italic</button>
  <Separator orientation="vertical" decorative={false} />
  <button>Left align</button>
  <button>Center</button>
</div>