Divider
A divider component that creates a horizontal or vertical line to separate content. It supports line thickness, style type, and can include content in the middle.
Props
| Name | Default | Type |
|---|---|---|
size | 1 | number string Divider line thickness |
type | solid | 'solid' | 'dashed' | 'dotted' Divider line style |
vertical | false | boolean Makes the divider vertical instead of horizontal |
height | 100% | number string Height for a vertical divider. Pass it when vertical is true |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | Content to be displayed in the middle of the divider (creates a text divider) |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-divider-size | 1px | Line thickness |
--vui-divider-height | 100% | Vertical divider height |
--vui-divider-type | solid | Border style |
--vui-divider-color | var(--color-border) | Line color |
--vui-divider-slot-outline-color | var(--color-bg) | Slot label outline color |