Button

A button with multiple variants, sizes, and icon support.

Variants

<x-boson::button>Primary</x-boson::button>
<x-boson::button variant="secondary">Secondary</x-boson::button>
<x-boson::button variant="outline">Outline</x-boson::button>
<x-boson::button variant="ghost">Ghost</x-boson::button>
<x-boson::button variant="subtle">Subtle</x-boson::button>
<x-boson::button variant="danger">Danger</x-boson::button>
<x-boson::button variant="danger-soft">Danger Soft</x-boson::button>

Sizes

<x-boson::button variant="outline" size="xs">Extra Small</x-boson::button>
<x-boson::button variant="outline" size="sm">Small</x-boson::button>
<x-boson::button variant="outline" size="md">Medium</x-boson::button>
<x-boson::button variant="outline" size="lg">Large</x-boson::button>
<x-boson::button variant="outline" size="xl">Extra Large</x-boson::button>

With icons

<x-boson::button variant="outline" icon="check">Save</x-boson::button>
<x-boson::button variant="outline" icon:trailing="arrow-right">Next</x-boson::button>
<x-boson::button variant="outline" icon="plus" square />

Turbo

{{-- Confirmation dialog before Turbo processes the action --}}
<x-boson::button turbo:confirm="Are you sure?">Archive</x-boson::button>

{{-- Change button text while submitting --}}
<x-boson::button type="submit" turbo:submits-with="Saving...">Save</x-boson::button>

{{-- Combine both --}}
<x-boson::button
    type="submit"
    variant="danger"
    turbo:confirm="Delete this item?"
    turbo:submits-with="Deleting..."
>
    Delete
</x-boson::button>

{{-- Disable Turbo on a button rendered as a link --}}
<x-boson::button :turbo="false" as="a" href="/external">External</x-boson::button>

Props