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").CSS variables
Set these on :root, or on any wrapper to restyle only the dividers inside it.
:root {
--cffy-divider-color: var(--cffy-outline-text-field);
--cffy-divider-spacing: var(--cffy-space-24);
}
| Variable | Default | Controls |
|---|---|---|
--cffy-divider-thickness / --cffy-divider-color | 1px / --cffy-outline-surface | Line |
--cffy-divider-spacing | 0.75rem | Space around the line (block axis, or inline axis when vertical) |
--cffy-divider-inset | 3rem | Start indent of inset dividers |
--cffy-divider-text-gap | 0.75rem | Space between a labelled divider's text and its lines |
--cffy-divider-text-color / --cffy-divider-text-font-size | --cffy-muted-a10 / --cffy-fs-2xs | Label text |