Separator

The Separator component renders a visual divider (usually a line) between content sections. It can be semantic (with role="separator" for screen readers) or purely decorative.

Use Separator for visual hierarchy and content organization. When decorative, it doesn't affect accessibility; when semantic, it signals a content boundary to assistive tech.

Features

Horizontal (default) or vertical orientation
Semantic or decorative modes
Accessible ARIA attributes
Data attributes for styling hooks

Usage

import { Separator } from '@loke/ui/separator';

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

Props

Prop

Type

Examples

Section 1

Some content above the separator

Section 2

Content below the separator

Profile

Settings

Logout

Horizontal (default)

<div className="space-y-4">
  <div>
    <h3>Heading 1</h3>
    <p>Description</p>
  </div>
  <Separator />
  <div>
    <h3>Heading 2</h3>
    <p>Description</p>
  </div>
</div>

Vertical (in a row)

<div className="flex items-center gap-4">
  <span>Item 1</span>
  <Separator orientation="vertical" className="h-6" />
  <span>Item 2</span>
  <Separator orientation="vertical" className="h-6" />
  <span>Item 3</span>
</div>

Decorative

<div>
  <h2>Menu</h2>
  <Separator decorative className="my-2" />
  <ul>
    <li>File</li>
    <li>Edit</li>
    <li>View</li>
  </ul>
</div>

Styling

Separator renders as a <div> by default. Style it with classes:

// Horizontal line (add borders or background)
<Separator className="bg-gray-200 h-px my-4" />

// Vertical divider
<Separator orientation="vertical" className="w-px h-8 bg-gray-300" />

// Custom styling
<Separator className="border-l-2 border-dashed border-gray-400" />

Accessibility

When decorative={false} (default): has role="separator" to announce a content boundary
When decorative={true}: has role="none" for purely visual dividers
Orientation is set via aria-orientation attribute
Use semantic mode when the separator has meaning to the structure

Best practices

Set decorative={true} for visual-only dividers (no semantic meaning)
Use semantic mode for dividers that represent actual content boundaries (e.g., navigation sections)
Combine with margin/padding utilities for proper spacing
For vertical separators, set an explicit height
Test with screen readers to ensure decorative separators don't cause confusion

Separator

Section 1

Section 2

On this page