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

Button

Displays a button or a link styled as a button.

Usage
example.blade.php 
<x-slate::button>Button</x-slate::button>

Variants

Use the variant prop to change the visual style.

example.blade.php 
<div class="flex flex-wrap gap-2">
    <x-slate::button variant="default">Default</x-slate::button>
    <x-slate::button variant="secondary">Secondary</x-slate::button>
    <x-slate::button variant="outline">Outline</x-slate::button>
    <x-slate::button variant="ghost">Ghost</x-slate::button>
    <x-slate::button variant="destructive">Destructive</x-slate::button>
    <x-slate::button variant="link">Link</x-slate::button>
</div>

Sizes
example.blade.php 
<div class="flex flex-wrap items-center gap-2">
    <x-slate::button size="xs">Extra small</x-slate::button>
    <x-slate::button size="sm">Small</x-slate::button>
    <x-slate::button size="default">Default</x-slate::button>
    <x-slate::button size="lg">Large</x-slate::button>
</div>

Icon buttons

Use size="icon-*" for square icon-only buttons. Put SVG or icon components in the slot.

example.blade.php 
<x-slate::button size="icon" variant="outline" aria-label="Settings">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
        <circle cx="12" cy="12" r="3"/>
    </svg>
</x-slate::button>

Render as an anchor with as="a" and an href:

Go to dashboard
example.blade.php 
<x-slate::button as="a" href="/dashboard" variant="outline">
    Go to dashboard
</x-slate::button>

Loading

Use the loading prop for a forced busy state (docs, Alpine demos, non-Livewire apps). Pair with loadingText for the busy label.

Forced state
example.blade.php 
<div class="flex flex-wrap gap-2">
    <x-slate::button loading>Save</x-slate::button>
    <x-slate::button loading loading-text="Saving…">Save</x-slate::button>
    <x-slate::button variant="outline" loading loading-text="Please wait">Continue</x-slate::button>
</div>

Alpine demo

Toggle loading in the browser — works on static exports (no Livewire):

example.blade.php 
<div
    x-data="{
        loading: false,
        async save() {
            if (this.loading) return;
            this.loading = true;
            await new Promise((resolve) => setTimeout(resolve, 1400));
            this.loading = false;
        }
    }"
    class="flex flex-wrap gap-2"
>
    <x-slate::button
        x-bind:disabled="loading"
        x-bind:aria-busy="loading"
        x-on:click="save()"
    >
        <span x-show="!loading" class="inline-flex items-center gap-2">
            Save changes
        </span>
        <span x-show="loading" x-cloak class="inline-flex items-center gap-2">
            <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-90" fill="currentColor" d="M12 2a10 10 0 0 1 10 10h-4a6 6 0 0 0-6-6V2z"></path>
            </svg>
            Saving…
        </span>
    </x-slate::button>
</div>

Livewire loading

When you pass wire:click / wire:submit, the button wires wire:loading automatically. Use loadingText for the busy label:

example.blade.php 
<x-slate::button wire:click="save" loading-text="Saving…">
    Save
</x-slate::button>

The control disables for the request and swaps to a spinner + loading text. See Livewire for more.

Disabled
example.blade.php 
<x-slate::button disabled>Disabled</x-slate::button>

Props
Prop Type Default Description
variant default, secondary, outline, ghost, destructive, link default Visual style
size xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg default Size preset
rounded none, sm, md, lg, xl, full md Border radius
animation auto, none, subtle, lift auto Hover micro-animation
loading bool false Forced busy state (spinner + disabled)
loadingText string null Busy label for loading or Livewire wire:loading
as button, a button HTML element
type button, submit, reset button Button type when as="button"
Last updated .