Divider

Visually separates content sections with an optional label.

Examples

Basic Usage

A simple horizontal line to separate content.

Content above

Content below

blade

<p class="text-sm text-foreground/50 dark:text-background-400">Content above</p>
<x-plume::divider />
<p class="text-sm text-foreground/50 dark:text-background-400">Content below</p>

With Label

Add a text label in the center of the divider.

Section Title

blade

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

<x-plume::divider label="Section Title" />

With Custom Content

Use the slot to insert custom content, such as icons.

blade

<x-plume::divider>
    <x-plume::icon i="icon-[fluent--star-24-filled]" class="size-4 text-warning" />
</x-plume::divider>

Prop	Type	Default	Description
label	string	null	Text label to display in the center of the divider.

Usage

blade

<x-plume::divider />