Documentation Index
Fetch the complete documentation index at: https://mintlify.com/livewire/flux/llms.txt
Use this file to discover all available pages before exploring further.
The Separator component creates visual dividers between content sections. It supports horizontal and vertical orientations, with optional text labels.
Basic Usage
<div>
<p>Section 1</p>
<flux:separator />
<p>Section 2</p>
</div>
Orientation
<flux:separator orientation="horizontal" />
<!-- or -->
<flux:separator />
<div class="flex items-center gap-4">
<span>Left</span>
<flux:separator orientation="vertical" />
<span>Right</span>
</div>
<!-- or use the shorthand -->
<div class="flex items-center gap-4">
<span>Left</span>
<flux:separator vertical />
<span>Right</span>
</div>
With Text
Add descriptive text within the separator:
<flux:separator text="Or" />
<flux:separator text="Continue with" />
<form>
<flux:input type="email" placeholder="Email" />
<flux:button type="submit" variant="primary">Sign in with Email</flux:button>
<flux:separator text="Or continue with" />
<flux:button icon="github">GitHub</flux:button>
<flux:button icon="google">Google</flux:button>
</form>
Variants
Control the visual prominence:
Standard separator with medium opacity. <flux:separator variant="subtle" />
Usage in Lists
Separate items in vertical lists:
<div class="space-y-4">
<div>
<h3 class="font-semibold">Item 1</h3>
<p class="text-sm text-zinc-500">Description for item 1</p>
</div>
<flux:separator />
<div>
<h3 class="font-semibold">Item 2</h3>
<p class="text-sm text-zinc-500">Description for item 2</p>
</div>
<flux:separator />
<div>
<h3 class="font-semibold">Item 3</h3>
<p class="text-sm text-zinc-500">Description for item 3</p>
</div>
</div>
Usage in Navigation
Separate navigation groups:
<flux:navlist>
<flux:navlist.item href="/dashboard">Dashboard</flux:navlist.item>
<flux:navlist.item href="/projects">Projects</flux:navlist.item>
<flux:separator />
<flux:navlist.item href="/settings">Settings</flux:navlist.item>
<flux:navlist.item href="/profile">Profile</flux:navlist.item>
</flux:navlist>
Inline Separators
Use vertical separators in toolbars or inline layouts:
<div class="flex items-center gap-2">
<flux:button variant="ghost" icon="bold" />
<flux:button variant="ghost" icon="italic" />
<flux:button variant="ghost" icon="underline" />
<flux:separator vertical />
<flux:button variant="ghost" icon="list-bullet" />
<flux:button variant="ghost" icon="numbered-list" />
</div>
In Flex Layouts
Vertical separators automatically adjust height:
<div class="flex items-stretch h-24">
<div class="flex-1">Left content</div>
<flux:separator vertical />
<div class="flex-1">Right content</div>
</div>
Custom Styling
Override the appearance with Tailwind classes:
<!-- Thicker separator -->
<flux:separator class="h-px" />
<!-- Custom color -->
<flux:separator class="bg-blue-500" />
<!-- Dashed style -->
<flux:separator class="border-dashed border-t border-zinc-300" style="height: 0; background: none;" />
Props Reference
| Prop | Type | Default | Description |
|---|
orientation | string | horizontal | Separator orientation: horizontal, vertical |
vertical | boolean | false | Shorthand for orientation="vertical" |
variant | string | - | Visual variant: subtle for lighter appearance |
text | string | - | Optional text label to display |
Accessibility
- Separators use
role="none" for proper semantics
- The
data-orientation attribute helps with styling and behavior
- Text separators maintain readable contrast ratios
Best Practices
- Use Sparingly: Too many separators can make content feel fragmented
- Group Related Content: Use separators to delineate distinct sections
- Consider White Space: Sometimes padding is better than a visible line
- Match Context: Use subtle variants for less important divisions
The Separator component uses [print-color-adjust:exact] to ensure separators are visible when printing.