Divider
A horizontal or vertical separator line, with an optional text in the middle ("or", a date).
Usage
Horizontal and vertical
Above
Below
ProfileSettingsSign out
vue
<SuDivider />
<SuDivider orientation="vertical" spacing="sm" />With text
vue
<SuDivider label="or" />
<SuDivider label="Today" label-align="start" />
<SuDivider label="End of list" variant="dashed" label-align="end" />API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation |
variant | 'solid' | 'dashed' | 'solid' | Line style |
label | string | - | Middle text (or default slot), horizontal only |
labelAlign | 'start' | 'center' | 'end' | 'center' | Text position |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | Space around the line |
decorative | boolean | false | Purely visual line, hidden from screen readers |
Accessibility
- Without text:
role="separator", witharia-orientation="vertical"when vertical. - With text: the text is read normally, the lines are decorative.
decorative:aria-hidden="true", for a line that does not separate real sections (e.g. in a toolbar).