HelixTimelyCare Experience Design System
Light

Separator

Visually or semantically separates content.

Spec · from metadata

When to use

  • •Visually dividing sections within a card, dialog, or sidebar
  • •Separating groups of menu items or toolbar actions
  • •Adding horizontal rules between content blocks

When not to use

  • •For spacing only without a visible line — use margin/padding instead
  • •For borders on containers — use border utilities directly on the container
  • •For table row separators — Table components include built-in borders

Anti-patterns

Avoid<Separator orientation="vertical" />  <!-- in a block layout -->
Prefer<div className="flex h-5 items-center space-x-4"><span>Item A</span><Separator orientation="vertical" /><span>Item B</span></div>

Vertical separators need a flex parent with defined height to be visible

Avoid<hr />
Prefer<Separator />

Use Separator for consistent design system styling and Radix accessibility semantics

Accessibility

  • Required ARIAaria-orientation (set by Radix based on orientation prop)
  • Screen readerWhen decorative=true (default), the separator is hidden from the accessibility tree. Set decorative=false if it represents a meaningful content boundary.

Token bindings

TokenCategoryUsage
bg-bordercolorSeparator line color

Import

import { Separator } from "@timelycare/helix-ui"

Props

interface SeparatorProps {
  orientation?: "horizontal" | "vertical"
  decorative?: boolean
  className?: string
}

Structure

OrientationTailwind
Horizontalh-px w-full bg-border
Verticalh-full w-px bg-border

Orientations

OrientationUse For
horizontalDivide stacked content sections
verticalSeparate inline items (nav links, breadcrumbs)

Common Patterns

Horizontal (Content Divider)

<div>
  <div className="space-y-1">
    <h4 className="text-sm font-medium leading-none">Tailwind CSS</h4>
    <p className="text-sm text-muted-foreground">
      A utility-first CSS framework.
    </p>
  </div>
  <Separator className="my-4" />
  <div className="flex h-5 items-center gap-4 text-sm">
    <span>Blog</span>
    <Separator orientation="vertical" />
    <span>Docs</span>
    <Separator orientation="vertical" />
    <span>Source</span>
  </div>
</div>

Vertical (Inline Items)

<div className="flex h-5 items-center gap-4 text-sm">
  <span>Blog</span>
  <Separator orientation="vertical" />
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Source</span>
</div>

In Card

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
  </CardHeader>
  <Separator />
  <CardContent className="pt-4">
    Content here
  </CardContent>
</Card>

Navigation Divider

<nav className="flex items-center gap-2">
  <Link href="/home">Home</Link>
  <Separator orientation="vertical" className="h-4" />
  <Link href="/about">About</Link>
  <Separator orientation="vertical" className="h-4" />
  <Link href="/contact">Contact</Link>
</nav>

Accessibility

  • Built on Radix Separator
  • Uses role="separator" by default (announced by screen readers)
  • Set decorative prop to hide from accessibility tree when purely visual
  • No keyboard interaction
  • Orientation conveyed via aria-orientation

Gotchas

ProblemSolution
Vertical not visibleParent needs h-* or items-center with height
No spacing around separatorAdd my-4 (horizontal) or mx-4 (vertical)
Separator too longConstrain parent width or use max-w-*
Not accessibleUse decorative={false} if semantically meaningful

See Also

  • Related Components: Card (content dividers), Resizable (panel dividers)
  • Patterns: Layouts — Divider patterns

Last updated: February 9, 2026