Separator

A divider line to visually separate content. Supports horizontal and vertical orientation, centered text labels, and a subtle variant.

Basic

<x-boson::separator />

With text

<x-boson::separator text="or" />

Subtle

<x-boson::separator />
<x-boson::separator subtle />

Vertical

Left

Right

<div class="flex items-center gap-4">
    <span>Left</span>
    <x-boson::separator vertical class="h-6" />
    <span>Right</span>
</div>

In a card

Section one

Content for the first section.

Section two

Content for the second section.

<x-boson::card>
    <div class="p-4">
        <x-boson::heading size="sm">Section one</x-boson::heading>
        <p class="text-sm text-zinc-500">Content for the first section.</p>
    </div>
    <x-boson::separator />
    <div class="p-4">
        <x-boson::heading size="sm">Section two</x-boson::heading>
        <p class="text-sm text-zinc-500">Content for the second section.</p>
    </div>
</x-boson::card>

Props

Prop	Type	Default	Description
`text`	`string`	`null`	Centered text label displayed on the separator line (horizontal only)
`vertical`	`boolean`	`false`	Render as a vertical divider. Requires an explicit height class (e.g. class="h-6")
`subtle`	`boolean`	`false`	Use a lighter, less prominent separator style