Divider

A separator between content or layout regions. Supports text/icon labels, line styles, thickness and orientation. Decorative by default for layout, or a real separator for the a11y tree.

Basics

divider.html

html

1	<nana-divider></nana-divider>
2	<nana-divider>OR</nana-divider>
3	<nana-divider variant="dashed" thickness="medium"></nana-divider>

Variants

variant="solid"

variant="dashed"

variant="dotted"

variant="gradient"

Thickness

thickness="thin"

thickness="medium"

thickness="thick"

Vertical

Edit

Duplicate

Delete

vertical.html

html

1	<div style="display:flex;align-items:center;gap:1rem;height:1.5rem;">
2	<span>Edit</span>
3	<nana-divider orientation="vertical"></nana-divider>
4	<span>Delete</span>
5	</div>

Import

main.ts

1	import "@nana-tec/ui-components/divider";

Customization

SECTION

divider.css

css

1	nana-divider.brand {
2	--nana-divider-color: #2563eb;
3	--nana-divider-gradient: linear-gradient(to right, #2563eb, #db2777);
4	--nana-divider-label-color: #2563eb;
5	}

CSS Variable	Description
`--nana-divider-color`	Line colour
`--nana-divider-thickness`	Line thickness (overrides attribute)
`--nana-divider-gradient`	Gradient (gradient variant)
`--nana-divider-label-color`	Label colour

Props

Attribute	Type	Default	Description
`orientation`	`horizontal \| vertical`	`horizontal`	Line direction
`variant`	`solid \| dashed \| dotted \| gradient`	`solid`	Line style
`thickness`	`thin \| medium \| thick`	`thin`	Line thickness
`label`	`string`	`—`	Convenience text label (or slot content)
`inset`	`boolean`	`false`	Pull the rule in from the edges
`decorative`	`boolean`	`false`	Remove role=separator from the a11y tree