Divider
Horizontal and vertical separators for organizing content sections, form layouts, and navigation groups.
Above the divider
or
Below the divider
API
All inputs and configuration options for zyra-divider.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Line direction |
variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Line stroke style |
align | 'start' | 'center' | 'end' | 'center' | Alignment of the optional label along the line |
label | string | '' | Optional text label centered on the divider (e.g. "or") |
width | string | '1px' | CSS thickness of the divider line (e.g. "2px") |
Tokens
CSS custom properties zyra-divider reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Line & label color--zyra-color-foreground-muted | var(--zyra-color-text-muted) | Color of the line itself and the optional centered label. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="separator" for screen reader context
- Vertical dividers should have aria-orientation="vertical"
- When used decoratively, add aria-hidden="true"