Separator

A visual divider that separates content sections horizontally or vertically

Installation

pnpm add @wandercom/design-system-web

Usage

import { Separator } from '@wandercom/design-system-web/ui/separator';

export function Example() {
  return (
    <div>
      <div className="space-y-1">
        <h4 className="text-lg font-medium">Wander Design System</h4>
        <p className="text-sm text-secondary">A component library for web</p>
      </div>
      <Separator className="my-4" />
      <div className="flex h-5 items-center space-x-4 text-sm">
        <div>Documentation</div>
        <Separator orientation="vertical" />
        <div>Components</div>
      </div>
    </div>
  );
}

Examples

Loading example...

The Separator renders as a 1px line using bg-border-secondary. Use horizontal separators to divide stacked content sections, and vertical separators to separate inline elements. Both orientations are shown above.

Props

orientation?

'horizontal' | 'vertical'
The orientation of the separator. Defaults to horizontal.

decorative?

boolean
Whether the separator is purely decorative. When true, accessibility-related attributes are updated so that the rendered element is removed from the accessibility tree. Defaults to true.

className?

string
Additional CSS classes to apply.

Accessibility

The Separator component is built on the Radix UI Separator primitive, which follows WAI-ARIA separator role guidelines.

  • Renders with role="separator" when decorative is false, providing semantic meaning to assistive technologies
  • When decorative is true (the default), the element is removed from the accessibility tree using role="none" since it serves no semantic purpose
  • Set decorative={false} when the separator conveys meaningful structure, such as dividing distinct sections of a page
  • Supports both horizontal and vertical orientations, with aria-orientation set accordingly when non-decorative
Separator