Components

Toggle

A two-state button that can be either on or off.

php artisan blatui:add toggle

<x-ui.toggle aria-label="Toggle bold">
    <x-lucide-bold />
</x-ui.toggle>

Disabled

<div class="flex items-center gap-2">
    <x-ui.toggle disabled aria-label="Toggle bold (disabled)">
        <x-lucide-bold />
    </x-ui.toggle>
    <x-ui.toggle variant="outline" disabled aria-label="Toggle italic (disabled)">
        <x-lucide-italic />
    </x-ui.toggle>
</div>

Outline

<x-ui.toggle variant="outline" aria-label="Toggle italic">
    <x-lucide-italic />
</x-ui.toggle>

Rounded

{{-- Pill-shaped toggles via rounded-full. --}}
<div class="flex items-center gap-2">
    <x-ui.toggle class="rounded-full" aria-label="Like">
        <x-lucide-heart />
    </x-ui.toggle>
    <x-ui.toggle variant="outline" class="rounded-full" aria-label="Favourite">
        <x-lucide-star />
    </x-ui.toggle>
    <x-ui.toggle class="rounded-full" pressed aria-label="Bookmark">
        <x-lucide-bookmark />
    </x-ui.toggle>
</div>

Sizes

<div class="flex items-center gap-2">
    <x-ui.toggle size="sm" aria-label="Toggle small">
        <x-lucide-bold />
    </x-ui.toggle>
    <x-ui.toggle size="default" aria-label="Toggle default">
        <x-lucide-bold />
    </x-ui.toggle>
    <x-ui.toggle size="lg" aria-label="Toggle large">
        <x-lucide-bold />
    </x-ui.toggle>
</div>

With Count

{{-- A stat toggle: icon, label and a trailing count. --}}
<div class="flex items-center gap-2">
    <x-ui.toggle variant="outline" aria-label="Upvote">
        <x-lucide-arrow-big-up />
        Upvote
        <span class="text-muted-foreground tabular-nums">27</span>
    </x-ui.toggle>
    <x-ui.toggle variant="outline" pressed aria-label="Star on GitHub">
        <x-lucide-star />
        Star
        <span class="text-muted-foreground tabular-nums">1.2k</span>
    </x-ui.toggle>
</div>

With Text

<x-ui.toggle aria-label="Toggle italic">
    <x-lucide-italic />
    Italic
</x-ui.toggle>

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php

use Livewire\Component;

class Demo extends Component
{
    public bool $bold = false;

    public function render()
    {
        return view('livewire.demo');
    }
}

resources/views/livewire/demo.blade.php

<x-ui.toggle wire:model="bold">B</x-ui.toggle>

API Reference

Props, slots and exposed methods for <x-ui.toggle>.

Props

Prop	Type	Default	Description
`variant`	`string`	`'default'`	Visual style of the toggle button. `default` `outline`
`size`	`string`	`'default'`	Control size. `default` `sm` `lg`
`pressed`	`bool`	`false`	Initial pressed (on) state. The component manages the toggled state internally after that.
`disabled`	`bool`	`false`	Disable the toggle.

Slots

Slot	Description
`default`	The toggle content, typically an icon and/or a short label.