Separator
A thin line that divides content horizontally or vertically, with an optional label.Horizontal and vertical
Preview
Code
Adv UICross-platform components.
DocsComponentsThemes
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Separator } from '@advui/core'
<Separator />
<Separator label="or" />
<Separator label="Continue with" labelPosition="start" />Examples
Labelled
An "or" between two ways to sign in, and a label at the start.Preview
Code
or
New here?
Ask your team admin for an invitation.API reference
Separator
With a label, it is a row: a line, the label in small muted text, then a line, `3` apart. View props go on that row.| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the line. A vertical separator ignores the label. |
decorative | boolean | true | When false, exposes `role="separator"` to assistive technology, named by the label. |
label | string | — | Text between two lines, such as "or". Horizontal only. Since 0.9.0. |
labelPosition | 'start' | 'center' | 'end' | 'center' | Where the label sits: at `start` or `end`, the line on that side is 16px long. Since 0.9.0. |
children | ReactNode | — | Richer content in place of `label`. Text is styled like the label. |
Accessibility
- Decorative by default (hidden from screen readers). With a label, the lines are hidden and the label stays readable text.
- Set
decorative={false}when it separates meaningful groups, e.g. in menus. A labelled one is then aseparatornamed by its label (one element on iOS and Android).