Separator
A visual divider between sections of content.
Spark UI
An open-source UI component library.
BlogDocsSource
OR
Subtotalā¬42.00
Usage
import { Separator } from '@epilot/spark-ui/separator'<Separator />
<Separator orientation="vertical" />Pass children to render a centered text label between two lines (e.g. an "OR" divider). This is only supported for horizontal separators.
<Separator>OR</Separator>Set variant="dotted" for a dotted line. Inside a flex row, a dotted separator with flex-1 fills the space between a label and its price.
<div className="flex items-baseline gap-2">
<span>Subtotal</span>
<Separator variant="dotted" className="flex-1" />
<span>ā¬42.00</span>
</div>For label and value rows joined by dots, use DataList with variant="dotted" instead of building this by hand.
API Reference
| Prop | Type | Default |
|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" |
variant | "solid" | "dotted" | "solid" |
decorative | boolean | true (false when children is set) |
children | React.ReactNode | - |
Decorative separators have role="none" so screen readers skip them. A plain line defaults to decorative since it's purely visual, but a labeled divider (e.g. "OR") defaults to role="separator" since the label conveys real meaning. Pass decorative explicitly to override either default.