Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Toggle

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

Usage
example.blade.php 
<x-slate::toggle aria-label="Toggle italic">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
        <path d="M19 4h-9M14 20H5M15 4 9 20" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
</x-slate::toggle>

Outline
example.blade.php 
<div class="flex items-center gap-2">
    <x-slate::toggle variant="outline" aria-label="Toggle bold">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::toggle>
    <x-slate::toggle variant="outline" pressed aria-label="Toggle italic">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M19 4h-9M14 20H5M15 4 9 20" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slate::toggle>
    <x-slate::toggle variant="outline" aria-label="Toggle underline">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
            <path d="M6 4v6a6 6 0 0 0 12 0V4" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M4 20h16" stroke-linecap="round" />
        </svg>
    </x-slate::toggle>
</div>

With text
example.blade.php 
<x-slate::toggle variant="outline">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4" aria-hidden="true">
        <path d="M19 4h-9M14 20H5M15 4 9 20" stroke-linecap="round" stroke-linejoin="round" />
    </svg>
    Italic
</x-slate::toggle>

API Reference
Prop Type Default Description
pressed bool false Initial pressed state
variant default | outline default Visual style
size default | sm | lg default Control size
Last updated .