Separator

The Separator component provides a visual divider to separate content sections. It's useful for creating clear visual boundaries between related groups of content.

Separator is decorative by default. Set decorative={false} for semantic separation.

Features

Horizontal and vertical orientations
Decorative mode for visual-only separation
Semantic mode with proper ARIA role
Customizable appearance
Lightweight implementation

Usage

import { Separator } from '@loke/design-system/separator';

export default function Example() {
  return (
    <div>
      <h2>Section Title</h2>
      <p>Some content here.</p>
      <Separator className="my-4" />
      <p>More content below.</p>
    </div>
  );
}

Tips:

Use horizontal separators between stacked sections.
Use vertical separators between inline elements.
Consider margin/padding for subtle separations instead.

Props

Separator

Prop

Type

Examples

Basic separator

First Section

Content for the first section.

Second Section

Content for the second section.

<div className="space-y-4">
  <div>
    <h4 className="font-medium">First Section</h4>
    <p className="text-sm text-muted-foreground">
      Content for the first section.
    </p>
  </div>
  <Separator />
  <div>
    <h4 className="font-medium">Second Section</h4>
    <p className="text-sm text-muted-foreground">
      Content for the second section.
    </p>
  </div>
</div>

Vertical separator

Blog

Docs

Source

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

With text

<div className="relative">
  <Separator />
  <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-background px-2 text-xs text-muted-foreground">
    OR
  </span>
</div>

In a list

Subtotal$99.00

Shipping$4.99

Tax$9.00

Total$112.99

<div className="w-full max-w-xs">
  {items.map((item, index) => (
    <React.Fragment key={item.label}>
      <div className="flex items-center justify-between py-3">
        <span className="text-sm">{item.label}</span>
        <span className="text-sm text-muted-foreground">{item.value}</span>
      </div>
      {index < items.length - 1 && <Separator />}
    </React.Fragment>
  ))}
</div>

Accessibility

Uses role="separator" when decorative={false}.
Uses role="none" when decorative to hide from screen readers.
Sets aria-orientation for vertical separators.
Does not receive focus (purely visual element).

Best practices

Use separators to create visual hierarchy in your layout.
Keep separators subtle—they should guide the eye, not distract.
Use margin/padding for minor separations within related content.
Group related items together, then separate groups with separators.
Consider using decorative={false} when the separator has semantic meaning.
Avoid overusing separators—white space is often sufficient.

Separator

First Section

Second Section

On this page