Github
  1. Blade Components
  5. Separator

Separator

Visually divide sections of content or groups of items.

Blade Components

An open-source UI component library.

Docs

Components

Themes

Usage

<x-separator />

Component API

Attribute Default Description
style solid string
Possible values solid or dashed.
vertical false bool
Determines the orientation of the separator.

Style

Control the separator style by supplying the style="" attribute.

<div class="flex flex-col 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="flex flex-col 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 contents with a vertical separator when horizontally stacked by supplying 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>
Pulser
Spinner

On This Page