Divider

A horizontal or vertical rule for separating layout regions: sections of a form, rows in a list, or items in a toolbar. It ranges from a plain line to a line split by a centered label, and can be purely decorative or a real role="separator" a screen reader announces.

<x-bladewind::divider />

Label

Pass label to split the line around centered text, the familiar "or" divider between a form and an alternate action.

<x-bladewind::divider label="OR" />

A label only applies to a horizontal divider; it is ignored on a vertical one.

Orientation

Set orientation to vertical to separate content side-by-side, such as items in a toolbar. A vertical divider stretches to fill its container's height, so give the container a defined height.

<div class="flex items-center h-6">
    <span>Edit</span>
    <x-bladewind::divider orientation="vertical" />
    <span>Duplicate</span>
    <x-bladewind::divider orientation="vertical" />
    <span>Delete</span>
</div>

Spacing

spacing controls the margin either side of the line: none, small, medium (default), or large.

<x-bladewind::divider spacing="none" />
<x-bladewind::divider spacing="small" />
<x-bladewind::divider spacing="large" />

Colour

color tints the line and label with any of BladewindUI's accepted colours instead of the neutral slate default.

<x-bladewind::divider label="Section" color="primary" />

Decorative vs semantic

By default a divider is purely visual: it renders role="none" and aria-hidden="true", so assistive technology skips it entirely. Set decorative="false" when the divider marks a real boundary a screen reader should announce (for example, between distinct sections of a long form), which renders role="separator" and aria-orientation instead.

<x-bladewind::divider decorative="false" />

Full List Of Attributes

Divider with all attributes defined

<x-bladewind::divider
orientation="horizontal"
label="or"
spacing="medium"
color="primary"
decorative="false"
class="ml-2" />