Divider

wu-divider separates content with a line. On an <hr> it is a horizontal separator; aria-orientation="vertical" turns it vertical.

Class or attribute	Effect
`wu-divider`	Root. Horizontal line with block margins
`aria-orientation="vertical"`	Vertical line that stretches to the row height
Text content	A label between two lines, on a `<div>`
`dashed`	Dashed line

Horizontal

Account

Billing

<p>Account</p>
<hr class="wu-divider">
<p>Billing</p>

Vertical

In a flex row, the vertical divider stretches to the row height.

Edit

Delete

<div class="flex x-center">
  <span>Edit</span>
  <hr class="wu-divider" aria-orientation="vertical">
  <span>Share</span>
  <hr class="wu-divider" aria-orientation="vertical">
  <span>Delete</span>
</div>

With text

A <div> with text shows the label between two lines. The text is read; the lines are decoration.

or continue with

<div class="wu-divider">or continue with</div>

Dashed

Older

<hr class="wu-divider dashed">
<div class="wu-divider dashed">Older</div>

Load only the divider

@use "@wovenui/components/divider";

The divider needs no other component.