Separator
Visually or semantically separates content.
Installation
import { Separator } from "@ramp-ds/ui"Usage
Dashboard
Keep track of what's shipping.
Overview
Analytics
Settings
Examples
Horizontal
Active Users
Today: 1,284
Sessions
Today: 6,210
New Signups
Today: 42
Vertical
Projects
Analytics
Reports
Settings
In Card
Marketing SiteLive
Version
v2.4
Visits
1,284
With Label
Or continue with
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | "horizontal" | "vertical" | "horizontal" | The orientation of the separator. |
| decorative | boolean | true | Whether the separator is purely decorative. When true, removes it from the accessibility tree. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Separator
- Uses proper ARIA role="separator"
- Set decorative=false for semantic separators
- Decorative separators are hidden from screen readers