Divider

Separate content with a horizontal rule and optional centered label text.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`label`	`label`	Fallback label when the default slot is empty.	`string`	`string`	`""`
`spacing`	`spacing`	Vertical space above and below (`none`, `xxs`, `xs`, `s`, `m`, `l`, `xl`, `xxl`; default `none`).	`DuoSpacing`	`(typeof duoSpacingValues)[number]`	`"none"`
`dashed`	`dashed`	Renders the rule with a dashed stroke.	`boolean`	`boolean`	`false`

Slots

Name	Description
`default`	Centered label; overrides `label` when provided.

Usage

Divider draws a full-width horizontal line. Add label text through the default slot or the label attribute to show a centered caption with line segments on each side—common for “Or” between sign-in options.

Do

Use a plain divider to separate stacked sections or form groups.
Use a labeled divider between alternative actions where the caption is visible to everyone.
Set spacing when the divider needs breathing room above and below (for example between stacked auth buttons).
Set dashed for a dashed stroke when a softer separator is needed.
Keep label text short (for example “Or”).

Don’t

Don’t use Divider for separators inside a grouped list—use List group instead.
Don’t use a decorative label as the only way to convey required information.