v0.6.59

Separator

A visual divider that separates content sections horizontally or vertically

Installation

pnpm add @wandercom/design-system-web

Usage

18 lines
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. Set variant="subtle" for the lighter bg-border-primary line, for dividers that should recede, such as under a sticky toolbar. 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.

variant?

'default' | 'subtle'
subtle uses the lighter border-primary token for quieter dividers. Defaults to default (border-secondary).

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

Subtle

Loading example...
Separator