Divider
A rule between groups of content, optionally with a label centred on it.
With a label
The usual case is separating two alternatives, like a login form above and social sign-in below.
or
Vertical
A vertical divider fills its parent's height, so that parent needs one — a flex row with a set height, or items that give it height themselves.
DraftEdited 2h ago3 collaborators
RichSeparator
A sibling component for when the thing between the lines is more than a word — a badge, a logo, an icon. Use label for plain overline text, or children for anything else (which takes precedence).
Trusted by
Pro only
Divider props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'horizontal' | 'vertical' | 'horizontal' | Vertical needs a parent with a definite height, since it stretches to fill it. |
| label | string | Optional text centred on the line. Horizontal only. |
RichSeparator props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | Shorthand for plain uppercase overline text. Ignored if children is set. | |
| children | ReactNode | Arbitrary content between the two lines — a badge, logo, or icon. |