- Components
- divider
Divider
Horizontal separator with optional labeled content and alignment controls.
Demo
<div class="flex flex-col gap-4 w-full">
<x-ui.divider class="border-primary"/>
<x-ui.divider class="border-secondary"/>
<x-ui.divider class="border-danger"/>
<x-ui.divider class="border-gray"/>
</div>Installation
Shell
php artisan flexi:add dividerWith label
Label Start
Label Center
Label End
Label Center
<div class="flex flex-col gap-4 w-full">
<x-ui.divider label="Label Start" class="before:bg-bg-muted" label-class="pr-3 bg-bg text-fg relative"/>
<x-ui.divider label="Label Center" class="before:bg-bg-muted" label-placement="middle" label-class="px-3 bg-bg text-fg relative"/>
<x-ui.divider label="Label End" class="before:bg-bg-muted" label-placement="end" label-class="pl-3 bg-bg text-fg relative"/>
<x-ui.divider label="Label Center" class="before:bg-bg-muted" label-placement="middle" label-class="px-3 bg-emerald-600 dark:bg-emerald-500 text-sm text-white rounded-full py-px relative"/>
</div>Usage Notes
- Use subtle spacing around dividers to avoid cramped layouts.
- Use labeled dividers to introduce sections like "Or continue with".
- Avoid stacking multiple dividers back-to-back.
API
| Prop | Description |
|---|---|
size
(default|2|3)
|
Controls divider thickness.
|
label
(string|null)
|
If provided, renders a labeled divider instead of a plain
hr
.
|
labelPlacement
(start|middle|end)
|
Aligns the label across the divider line.
|
labelClass
(string)
|
Additional classes for the label element.
|