Separator

Horizontal and vertical dividers for visually separating section content and UI groups.

Component Syntax

blade

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

1. Separator with Label

blade

Primary Section

OR

Secondary Section

<x-aura::flex direction="col" align="stretch" gap="3">

    <x-aura::text size="sm">
        Primary Section
    </x-aura::text>

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

    <x-aura::text size="sm">
        Secondary Section
    </x-aura::text>

</x-aura::flex>

2. Plain Line Separator

blade

Section A

Section B

<x-aura::flex direction="col" align="stretch" gap="3">

    <x-aura::text size="sm">
        Section A
    </x-aura::text>

    <x-aura::separator />

    <x-aura::text size="sm">
        Section B
    </x-aura::text>

</x-aura::flex>

Component Props

Available properties and configurations for the separator component.

Prop	Default	Available Values
label	null	Label string (e.g. OR, AND)
vertical	false	true false

Aura Wire

Component Library

Separator

Component Syntax

1. Separator with Label

2. Plain Line Separator

Component Props

Tag

Progress

Aura Wire