Separator

A visual divider between sections of content.

Spark UI

An open-source UI component library.

Blog
Docs
Source

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>

API Reference

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"
decorativebooleantrue (false when children is set)
childrenReact.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.

On this page