Separator
Visually divide sections of content or groups of items.
Blade Components
An open-source UI component library.
Docs
Components
Themes
#Usage
#
<x-separator />
#Style
#
Control the separator style by setting the style attribute.
<div class="grid gap-8">
<x-separator />
<x-separator style="dashed" />
</div>
#With Content
#
Add text or icons to the separator for a more descriptive element.
Optional
<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>
#Vertical
#
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>
#Component API
#
| Attribute | Default | Description |
|---|---|---|
style |
solid |
stringPossible values solid or dashed. |
vertical |
false |
boolDetermines the orientation of the separator. |