Button

Primary control for any action, supporting both anchors and buttons.

Usage

<x-btn>Button</x-btn>

Cursor

As of Tailwind v4 the default cursor behavior for buttons has switched from cursor: pointer to cursor: default.

If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

@layer base {
    button:not(:disabled),
    [role="button"]:not(:disabled) {
        cursor: pointer;
    }
}

Size

Control the button size by setting the size attribute.

<div class="flex items-start justify-center gap-8 max-md:flex-col max-md:items-center">
    <div class="flex items-center gap-2">
        <x-btn style="outline" size="sm">Small</x-btn>
        <x-btn style="outline" size="icon-sm">
            <x-heroicon-o-arrow-up-right />
        </x-btn>
    </div>

    <div class="flex items-center gap-2">
        <x-btn style="outline">Default</x-btn>
        <x-btn style="outline" size="icon">
            <x-heroicon-o-arrow-up-right />
        </x-btn>
    </div>

    <div class="flex items-center gap-2">
        <x-btn style="outline" size="lg">Large</x-btn>
        <x-btn style="outline" size="icon-lg">
            <x-heroicon-o-arrow-up-right />
        </x-btn>
    </div>
</div>

Style

Control the button style by setting the style attribute.

<div class="flex items-center justify-center gap-x-8 gap-y-2 max-md:flex-col">
    <x-btn style="primary">Button</x-btn>
    <x-btn style="secondary">Button</x-btn>
    <x-btn style="outline">Button</x-btn>
    <x-btn style="ghost">Button</x-btn>
</div>

<div class="flex items-center justify-center gap-x-8 gap-y-2 max-md:flex-col">
    <x-btn style="success">Button</x-btn>
    <x-btn style="info">Button</x-btn>
    <x-btn style="warning">Button</x-btn>
    <x-btn style="danger">Button</x-btn>
</div>

Link

Buttons can be used as an <a> element by adding an href attribute.

External Link

<div class="flex justify-center">
    <x-btn href="#" style="outline">
        External Link
        <x-heroicon-o-arrow-top-right-on-square />
    </x-btn>
</div>

Disabled State

Both linked buttons and traditional buttons can be set to a disabled state by adding the disabled attribute.

<div class="flex justify-center">
    <x-btn style="outline" disabled>Button</x-btn>
</div>

Rounding

Customize the button rounding by adding any of the rounded- classes.

<div class="flex justify-center">
    <x-btn style="outline" size="icon" class="rounded-full">
        <x-heroicon-o-arrow-up />
    </x-btn>
</div>

Spinner

Show a loading state by embedding the x-spinner component.

<div class="flex items-center justify-center gap-2 max-md:flex-col">
    <x-btn style="outline" disabled>
        <x-spinner />
        Processing payment...
    </x-btn>
    <x-btn style="outline" size="icon" disabled>
        <x-spinner />
    </x-btn>
</div>

Button Groups

Join related buttons into a group by wrapping them in a x-btn.group component.

<div class="flex items-center justify-center gap-2 max-md:flex-col">
    <x-btn.group>
        <x-btn style="outline">
            First
        </x-btn>
        <x-btn style="outline">
            Last
        </x-btn>
    </x-btn.group>

    <x-btn.group>
        <x-btn style="outline" size="icon">
            <x-heroicon-o-bold />
        </x-btn>
        <x-btn style="outline" size="icon">
            <x-heroicon-o-italic />
        </x-btn>
        <x-btn style="outline" size="icon">
            <x-heroicon-o-strikethrough />
        </x-btn>
    </x-btn.group>

    <x-btn.group>
        <x-btn size="icon" style="outline">
            <x-heroicon-o-bars-3-bottom-left />
        </x-btn>
        <x-btn size="icon" style="outline">
            <x-heroicon-o-bars-3 />
        </x-btn>
        <x-btn size="icon" style="outline">
            <x-heroicon-o-bars-3-bottom-right />
        </x-btn>
    </x-btn.group>
</div>

Component API

x-btn

Attribute	Default	Description
`style`	`primary`	`string` Possible values `primary`, `secondary`, `outline`, `ghost`, `success`, `info`, `warning` or `danger`.
`size`	`default`	`string` Possible values `default`, `sm`, `lg`, `icon`, `icon-sm` or `icon-lg`.
`href`	`null`	`string` \|\| `null` When set, renders an `<a>` element instead of a `<button>` element.
`alignment`	`center`	`string` Controls text alignment of the button label. Possible values `left`, `center` or `right`.
`disabled`	`false`	`bool` Whether the button is disabled.