Skip to content

Overview

The <x-aura::separator> component renders a thin line to visually divide content into sections. It supports horizontal and vertical orientations, multiple border styles, and an optional text label centered on the line. Separators are useful for grouping related content and improving visual hierarchy.

Use separators for:

  • Dividing form sections
  • Separating sidebar groups
  • Breaking up long pages of content
  • "Or" dividers between login methods

Basic Usage

<x-aura::separator />

Props

Prop Type Default Description
orientation string 'horizontal' Direction of the line: horizontal, vertical
label string|null null Optional text label displayed centered on the line
variant string 'default' Border style: default (solid), dashed, dotted

Variants / Examples

With Label

OR 
<x-aura::separator label="OR" />

Dashed Variant

<x-aura::separator variant="dashed" />

Dotted with Label

Section Break 
<x-aura::separator variant="dotted" label="Section Break" />

Vertical Separator

Item A
Item B
Item C 
<div class="flex items-center gap-4 h-8">
    <span>Item A</span>
    <x-aura::separator orientation="vertical" />
    <span>Item B</span>
    <x-aura::separator orientation="vertical" />
    <span>Item C</span>
</div>

Login Divider Pattern

or continue with 
<x-aura::button variant="outline" class="w-full">Sign in with Google</x-aura::button>
<x-aura::separator label="or continue with" class="my-4" />
<x-aura::input label="Email" type="email" />

Accessibility

  • The separator renders as a <div> element. For semantic purposes, consider adding role="separator" via attributes when used as a content boundary.
  • When a label is provided, the text is visible and accessible to screen readers.
  • Vertical separators used between inline items should be supplemented with appropriate spacing for visual clarity.