Button

A powerful and composable button component for your application.

<x-button>Button</x-button>

Variants

Use the


    variant

prop to change the visual style of the button.

<x-button variant="outline">Outline</x-button>
<x-button variant="primary">Primary</x-button>
<x-button variant="filled">Filled</x-button>
<x-button variant="danger">Danger</x-button>
<x-button variant="ghost">Ghost</x-button>
<x-button variant="subtle">Subtle</x-button>

Sizes

The default button size works great for most cases, but here are some additional size options for unique situations.

<x-button size="base">Base</x-button>
<x-button size="sm">Small</x-button>
<x-button size="xs">Extra small</x-button>

Icons

Automatically sized and styled icons for your buttons.

Recomended to use outline icon variant with prefix


    o-...

for buttons. More information visit icon component.

<x-button icon="o-users" />
<x-button icon="o-users">Users</x-button>
<x-button icon-trailing="o-users">Users</x-button>
<x-button variant="subtle" icon="o-users" />

Full width

A button that spans the full width of the container.

<x-button variant="primary" icon="o-envelope" class="w-full">Send Email</x-button>

Button groups

Fuse related buttons into a group with shared borders.

<x-button.group>
    <x-button>Oldest</x-button>
    <x-button>Newest</x-button>
    <x-button>Top</x-button>
</x-button.group>

Icon groups

Fuse multiple icon buttons into a visually-linked group.

<x-button.group>
    <x-button icon="o-bars-3-bottom-left" />
    <x-button icon="o-bars-3" />
    <x-button icon="o-bars-3-bottom-right" />
</x-button.group>

Attached button

Append or prepend an icon button to another button to add additional functionality.

<x-button.group>
    <x-button>New product</x-button>
    <x-button icon="o-chevron-down" />
</x-button.group>

For the dropdown part, you can refer to the dropdown component.

As a link

Display an HTML

tag as a button by passing the


    href

props.

Visit Google

<x-button href="https://google.com" icon-trailing="o-arrow-up-right">
    Visit Google
</x-button>