Separator
Visually divide sections of content or groups of items.
Blade Components
An open-source UI component library.
Control the separator style by setting the style attribute.
<div class="grid gap-8">
<x-separator />
<x-separator style="dashed" />
</div>
Add text or icons to the separator for a more descriptive element.
<div class="grid gap-8">
<x-separator>
<x-paragraph size="xs" style="muted">Optional</x-paragraph>
</x-separator>
<x-separator>
<x-heroicon-o-arrow-down-tray class="size-4 text-[var(--foreground)]" />
</x-separator>
</div>
Separate content with a vertical separator when elements are horizontally stacked by adding the vertical attribute.
<div class="flex items-start justify-center gap-4">
<x-btn size="icon" style="ghost">
<x-heroicon-o-arrow-down-tray />
</x-btn>
<x-separator vertical />
<x-btn style="outline">
Generate Export
</x-btn>
</div>
| Attribute |
Default |
Description |
style |
solid |
string
Possible values solid or dashed. |
vertical |
false |
bool
Determines the orientation of the separator. |