blatui

Components

Button

Displays a button or a component that looks like a button.

php artisan blatui:add button

Buttons default to type="button" — a deliberate default. Inside a <form>, set type="submit" on the submit button, or a native button migrated with no type will silently stop submitting. Run php artisan blatui:doctor to catch typeless buttons in forms.

<x-ui.button>Button</x-ui.button>

As Link

Link button Visit docs 
<div class="flex flex-wrap items-center gap-3">
    <x-ui.button href="#" variant="link">Link button</x-ui.button>
    <x-ui.button href="#" variant="outline"><x-lucide-external-link aria-hidden="true" /> Visit docs</x-ui.button>
</div>

Before After

{{-- Optional `before` / `after` named slots hoist an icon to the start/end of the label,
     with sizing handled for you. `as` renders the button as a different element. --}}
<div class="flex flex-wrap items-center gap-3">
    <x-ui.button>
        <x-slot:before><x-lucide-download /></x-slot:before>
        Download
    </x-ui.button>

    <x-ui.button variant="outline">
        Continue
        <x-slot:after><x-lucide-arrow-right /></x-slot:after>
    </x-ui.button>

    {{-- as="label": a button-styled <label> wrapping a hidden file input. --}}
    <x-ui.button as="label" variant="secondary" class="cursor-pointer">
        <x-slot:before><x-lucide-upload /></x-slot:before>
        Upload file
        <input type="file" class="sr-only">
    </x-ui.button>
</div>

Color

Badge — one wrapper, one accent. 
<div class="flex flex-col gap-5">
    {{-- Per-button: the `color` prop recolors a single button (use a shade dark enough for white text). --}}
    <div class="flex flex-wrap items-center gap-3">
        <x-ui.button color="#047857">Emerald</x-ui.button>
        <x-ui.button color="#6d28d9">Violet</x-ui.button>
        <x-ui.button color="#c2410c">Orange</x-ui.button>
        <x-ui.button color="#0e7490">Cyan</x-ui.button>
    </div>

    {{-- Subtree: set the theme tokens on a wrapper and every component inside recolors. --}}
    <div style="--primary: #be185d; --primary-foreground: #ffffff; --ring: #be185d;" class="flex flex-wrap items-center gap-3 rounded-lg border p-4">
        <x-ui.button>Primary</x-ui.button>
        <x-ui.button variant="outline">Outline</x-ui.button>
        <x-ui.badge>Badge</x-ui.badge>
        <x-ui.switch :checked="true" aria-label="Notifications" />
        <span class="text-muted-foreground text-sm">— one wrapper, one accent.</span>
    </div>
</div>

Gradient

<x-ui.button class="border-0 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white shadow-lg hover:opacity-90">
    <x-lucide-sparkles aria-hidden="true" /> Gradient
</x-ui.button>

Icon Sizes

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button size="icon-xs" variant="outline" aria-label="Add to favourites"><x-lucide-heart aria-hidden="true" /></x-ui.button>
    <x-ui.button size="icon-sm" variant="outline" aria-label="Add item"><x-lucide-plus aria-hidden="true" /></x-ui.button>
    <x-ui.button size="icon" variant="outline" aria-label="Open settings"><x-lucide-settings aria-hidden="true" /></x-ui.button>
    <x-ui.button size="icon-lg" variant="outline" aria-label="Star repository"><x-lucide-star aria-hidden="true" /></x-ui.button>
</div>

Loading

<x-ui.button disabled>
    <x-lucide-loader-circle class="animate-spin" />
    Please wait
</x-ui.button>

Pill

{{-- Fully rounded "pill" buttons, including an icon pill and an avatar pill. --}}
<div class="flex flex-wrap items-center gap-3">
    <x-ui.button class="rounded-full">Get started</x-ui.button>
    <x-ui.button variant="outline" class="rounded-full">Learn more</x-ui.button>
    <x-ui.button size="icon" variant="outline" class="rounded-full" aria-label="Like"><x-lucide-heart aria-hidden="true" /></x-ui.button>
    <x-ui.button variant="outline" class="h-11 rounded-full pr-4 pl-1.5">
        <x-ui.avatar class="size-8">
            <x-ui.avatar-image src="https://github.com/shadcn.png" alt="@shadcn" />
            <x-ui.avatar-fallback>CN</x-ui.avatar-fallback>
        </x-ui.avatar>
        shadcn
        <x-lucide-chevron-down class="opacity-60" aria-hidden="true" />
    </x-ui.button>
</div>

Sizes

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button size="xs">Extra small</x-ui.button>
    <x-ui.button size="sm">Small</x-ui.button>
    <x-ui.button>Default</x-ui.button>
    <x-ui.button size="lg">Large</x-ui.button>
</div>

Social

{{-- Social / provider sign-in buttons. --}}
<div class="flex w-full max-w-xs flex-col gap-3">
    <x-ui.button variant="outline">
        <x-lucide-github aria-hidden="true" /> Continue with GitHub
    </x-ui.button>
    <x-ui.button variant="outline">
        <svg viewBox="0 0 24 24" class="size-4" aria-hidden="true">
            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1Z" />
            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23Z" />
            <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84Z" />
            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.3 9.14 5.38 12 5.38Z" />
        </svg>
        Continue with Google
    </x-ui.button>
    <x-ui.button class="bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90">
        <x-lucide-apple aria-hidden="true" /> Continue with Apple
    </x-ui.button>
</div>

Variants

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

With Icon

<div class="flex flex-wrap items-center gap-3">
    <x-ui.button variant="outline"><x-lucide-mail /> Login with Email</x-ui.button>
    <x-ui.button><x-lucide-download /> Download</x-ui.button>
</div>

API Reference

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

Props

Prop Type Default Description
variant string 'default' Visual style of the button.
default destructive outline secondary ghost link
size string 'default' Height and padding. The icon-* sizes make a square button sized for a single icon.
default xs sm lg icon icon-xs icon-sm icon-lg
href string — When set, the button renders as an <a> with this href (unless overridden by as).
type string 'button' The HTML type attribute, emitted only when the element is a real <button> (e.g. submit).
as string — Force a specific HTML tag (e.g. label, div). Overrides the automatic a-vs-button choice.
color string — Any CSS color that recolors the button by overriding the primary/secondary/ring tokens on this element only.
colorForeground string '#ffffff' Label color paired with color. Defaults to white when color is set.

Slots

Slot Description
default The button label and any inline icons. SVGs are auto-sized and spaced via the gap.
before Icon or content hoisted to the start of the label, before the default slot.
after Icon or content appended to the end of the label, after the default slot.