Components
Divider
Separate content with UiDivider — horizontal, labelled, or vertical.
UiDivider renders a plain <hr> by default. Pass text for a labelled divider or vertical for separating inline content within a flex row. All variants expose role="separator".
Add a horizontal divider
<template>
<p>Section one</p>
<UiDivider />
<p>Section two</p>
</template>
Add a text label
<template>
<UiDivider text="OR" />
</template>
Use a vertical divider
Place it inside a flex row to separate inline content, such as toolbar actions.
<template>
<div class="d-flex align-items-center gap-2">
<UiButton variant="text" text="Cut" />
<UiDivider vertical />
<UiButton variant="text" text="Copy" />
<UiDivider vertical />
<UiButton variant="text" text="Paste" />
</div>
</template>
Inset a divider
Use inset to indent the divider, e.g. to align it past a leading icon in a list.
<template>
<UiDivider inset />
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | null | — | Centered label rendered between two hairlines. |
vertical | boolean | false | Renders a vertical divider for separating inline content. |
inset | boolean | false | Indents the divider from the inline start. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |
Plain dividers render an
<hr>; labelled and vertical dividers render a <div role="separator"> (a vertical divider also sets aria-orientation="vertical").