Separator
Visual divider for separating content sections with horizontal and vertical orientations
Overview
The Separator component provides a visual divider to separate content sections in your interface. It supports both horizontal and vertical orientations with proper ARIA attributes for accessibility, and can be marked as decorative when used purely for visual styling.
Import
import { Separator } from "@px-ui/core";Usage
Profile Settings
Manage your account preferences
<div>
<div className="space-y-1">
<h4>Profile Settings</h4>
<p>Manage your account preferences</p>
</div>
<Separator orientation="horizontal" className="my-4" />
<div className="flex h-5 items-center space-x-4">
<div>Account</div>
<Separator orientation="vertical" />
<div>Privacy</div>
<Separator orientation="vertical" />
<div>Security</div>
</div>
</div>Examples
Vertical Orientation
Use vertical separators to divide content horizontally, such as in navigation menus or toolbars.
<div className="flex h-20 items-center space-x-4">
<div>Profile</div>
<Separator orientation="vertical" />
<div>Settings</div>
<Separator orientation="vertical" />
<div>Help</div>
<Separator orientation="vertical" />
<div>Logout</div>
</div>Decorative vs Semantic
By default, separators are semantic (announced by screen readers). Use decorative when the separator is purely visual and shouldn't be announced.
Semantic separator (default)
Section A
Section B
Decorative separator
Purely visual
Not announced by screen readers
{/* Semantic separator - announced by screen readers */}
<Separator orientation="horizontal" />
{/* Decorative separator - not announced by screen readers */}
<Separator orientation="horizontal" decorative />API Reference
Separator
A visual divider component with configurable orientation and semantic behavior.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" | Direction of the separator line |
decorative | boolean | false | When true, sets role="none" to hide from screen readers. When false, uses role="separator" |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from native HTML div element.
Accessibility:
- Non-decorative separators use
role="separator"and includearia-orientationfor vertical separators - Decorative separators use
role="none"and are hidden from assistive technologies