A hairline rule between groups of content, horizontal or vertical, optionally captioned in the middle.
HorizontalVerticalLabelled
Projects Invoices
or
Everything archived last quarter<Separator label="or" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Separator } from '@chanrg/4ui';<Separator label="or" />Vertical
Divides a row instead of a stack; the rule stretches to the height of the row it sits in.
Projects Invoices
<div style="display:flex; align-items:center; gap:1rem"> <span>Projects</span> <Separator orientation="vertical" /> <span>Invoices</span></div>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | horizontal | vertical | horizontal | Direction of the rule; the vertical one stretches to its row. |
label | string | — | Caption rendered in the middle of the rule, e.g. “or”. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Always a real role="separator" with aria-orientation — never aria-hidden, so the structural break is exposed in both cases.
- A caption becomes the separator’s accessible name; the rule halves around it are decorative.