Start building

Platform

Open Source

Resources

Sign in

Button

x-button

A versatile button with multiple variants, sizes, link support, and built-in Livewire loading states.

php artisan components:add button

Examples

Variants

Six visual styles for every intent.

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-components.button>Primary</x-components.button>
    <x-components.button variant="secondary">Secondary</x-components.button>
    <x-components.button variant="outline">Outline</x-components.button>
    <x-components.button variant="ghost">Ghost</x-components.button>
    <x-components.button variant="destructive">Destructive</x-components.button>
    <x-components.button variant="link">Link</x-components.button>
</div>

Sizes

From xs to xl.

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-components.button size="xs">Extra small</x-components.button>
    <x-components.button size="sm">Small</x-components.button>
    <x-components.button size="md">Medium</x-components.button>
    <x-components.button size="lg">Large</x-components.button>
    <x-components.button size="xl">Extra large</x-components.button>
</div>

Loading state

Force the spinner with the loading prop, or wire it to Livewire with loader.

<div class="flex flex-wrap items-center justify-center gap-3">
    <x-components.button loading>Saving</x-components.button>
    <x-components.button variant="secondary" loading>Processing</x-components.button>
</div>

Props

Prop Type Default Description
type select button · submit · a button Renders a <button> or an <a> when set to 'a'.
variant select primary · secondary · destructive · outline · ghost · link primary The visual style of the button.
size select xs · sm · md · lg · xl · 2xl · 3xl md The size of the button.
href text — Destination URL when type is 'a'.
loader boolean false Show a spinner while a wire:click / wire:target is running.
loading boolean false Force the loading spinner on.

Slots

Slot Description
slot The button label.