A separator between content or layout regions. Supports text/icon labels, line styles, thickness and orientation.
<div style="width:100%">
<p style="margin:0">Above</p>
<nana-divider></nana-divider>
<p style="margin:0">Below</p>
</div>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/divider";
<p style="margin:0">Above</p>
<nana-divider></nana-divider>
<p style="margin:0">Below</p>
<div style="width:100%"><nana-divider variant="solid" thickness="medium"></nana-divider></div>
<div style="width:100%"><nana-divider variant="dashed" thickness="medium"></nana-divider></div>
<div style="width:100%"><nana-divider variant="dotted" thickness="medium"></nana-divider></div>
<div style="width:100%"><nana-divider variant="gradient" thickness="thick"></nana-divider></div>
<div style="width:100%"><nana-divider>OR</nana-divider></div>
<div style="display:flex;align-items:center;height:2rem;gap:1rem">
<span>Left</span>
<nana-divider orientation="vertical"></nana-divider>
<span>Right</span>
</div>
Properties
| Property | Attribute | Type | Default | Description |
|---|
decorative | — | boolean | false | Purely visual — removes the `separator` role from the a11y tree |
inset | — | boolean | false | Pull the rule in from the edges |
label | — | string | undefined | — | Convenience text label (equivalent to slotting text) |
orientation | — | DividerOrientation | 'horizontal' | Line direction |
thickness | — | DividerThickness | 'thin' | Line thickness |
variant | — | DividerVariant | 'solid' | Line style |
Slots
| Slot | Description |
|---|
(default) | Optional label content (text or an icon) centred in the rule |
CSS parts
| Part | Description |
|---|
::part(line) | The rule(s) |
::part(label) | The label wrapper |
CSS custom properties
| Property | Description |
|---|
--nana-divider-color | Line colour |
--nana-divider-thickness | Line thickness (overrides the `thickness` attribute) |
--nana-divider-gradient | Gradient (gradient variant) |
| Slot | Description |
|---|
(default) | Optional label content (text or an icon) centred in the rule |
| Variable | Default | Description |
|---|
--nana-divider-color | — | Line colour |
--nana-divider-thickness | — | Line thickness (overrides the thickness attribute) |
--nana-divider-gradient | — | Gradient (gradient variant) |
| Part | Description |
|---|
line | The rule(s) — two <hr> elements when a label is present |
label | The label wrapper |
Explore Divider interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
