Source

Command Palette

Search for a command to run...

Separator

A visual divider that separates content into groups.

About Separator

A thin, decorative line that visually separates content into distinct groups. The component supports both horizontal and vertical orientations. When not decorative, it provides semantic meaning through the separator role for assistive technologies.

Installation

import { Separator } from '@nipsys/lsd';

export default function MyComponent() {
  return (
    <div>
      <div>Content above</div>
      <Separator />
      <div>Content below</div>
    </div>
  );
}

Variants

Horizontal
Horizontal separator to divide content vertically.

Vertical
Vertical separator to divide content horizontally.

Features

Separator with Text
Custom separator with embedded text content.

API Reference

orientation
Orientation of the separator line.
Type: 'horizontal' | 'vertical'
decorative
Whether the separator is purely visual.
Type: booleanWhen true, the element is removed from accessibility tree.
className
Custom styling for the separator.
Type: string

Accessibility

Keyboard Navigation
Navigation through separators
Separators are non-interactive elements that do not receive keyboard focus.• Tab - Navigates past separator elements• Shift + Tab - Navigates backward past separators
ARIA Attributes
Accessibility attributes for screen readers
• role="separator" is added when decorative is false• When decorative is true, the element is removed from accessibility tree
Focus Management
Focus behavior for screen readers
Separators are non-interactive and have no focus states. They are purely visual elements that do not capture keyboard focus or mouse events. Screen readers announce separators when decorative is false to provide context about content boundaries.
Sheet