Divider

Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.

Default

Base

Class	Description
`.ui-divider`	Base class

Vertical

Class	Description
`.ui-divider--vertical`	vertical

Position

Class	Value
`.ui-divider--start`	start
`.ui-divider--end`	end

Dashed

Class	Description
`.ui-divider--dashed`	dashed

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-divider-color`	`var(--ui-color-border)`	Text color
`--ui-divider-line-size`	`var(--ui-border-width-sm)`	Line size
`--ui-divider-height`	`var(--ui-unit)`	Overall height
`--ui-divider-gap`	`calc(var(--ui-unit) * 2)`	Gap between children

Semantic Div

<div class="ui-divider" role="separator"></div>

With Label

<div class="ui-divider" role="separator">OR</div>

Label Alignment

Start

Center

End

<div class="ui-divider ui-divider--start" role="separator">Start</div>
<div class="ui-divider" role="separator">Center</div>
<div class="ui-divider ui-divider--end" role="separator">End</div>

Dashed

<div class="ui-divider ui-divider--dashed" role="separator"></div>

Vertical

Left

Right

<div class="ui-flex ui-items-center" style="block-size: 64px">
  <span>Left</span>
  <div class="ui-divider ui-divider--vertical" role="separator"></div>
  <span>Right</span>
</div>