Renders as any element (button, anchor, div) with eight visual variants, six colour themes, five sizes and three shapes. Includes a loading state, icon-only mode and full accessibility attributes. External Tailwind classes are merged with tailwind-merge so they override the internals.
Examples
Variants
Eight visual styles, from filled to inline link.
<div class="flex flex-wrap items-center gap-3">
<UiButton>Solid</UiButton>
<UiButton variant="outline">Outline</UiButton>
<UiButton variant="ghost">Ghost</UiButton>
<UiButton variant="dashed">Dashed</UiButton>
<UiButton variant="text">Text</UiButton>
<UiButton variant="link">Link</UiButton>
</div>Colours
Each variant carries the full colour set.
<div class="flex flex-wrap items-center gap-3">
<UiButton color="primary">Primary</UiButton>
<UiButton color="gray">Gray</UiButton>
<UiButton color="red">Red</UiButton>
<UiButton color="green">Green</UiButton>
<UiButton color="amber">Amber</UiButton>
</div>Sizes
Five sizes from xs to xl.
<div class="flex flex-wrap items-center gap-3">
<UiButton size="xs">Extra small</UiButton>
<UiButton size="sm">Small</UiButton>
<UiButton size="md">Medium</UiButton>
<UiButton size="lg">Large</UiButton>
<UiButton size="xl">Extra large</UiButton>
</div>Icons and loading
Compose an icon in the default slot; toggle the loading state by clicking.
<div class="flex flex-wrap items-center gap-3">
<UiButton>
<UiIcon name="mdi:content-save" class="w-4 h-4" /> Save
</UiButton>
<UiButton variant="ghost" color="gray" icon-only aria-label="Settings">
<UiIcon name="mdi:cog-outline" class="w-5 h-5" />
</UiButton>
<UiButton variant="outline" color="red" :loading="state.busy" @click="state.busy = !state.busy">
Delete
</UiButton>
</div>Shapes
Three shapes: round, pill and square. For a circular icon button, pair pill with icon-only.
<div class="flex flex-wrap items-center gap-3">
<UiButton shape="round">Round</UiButton>
<UiButton shape="pill">Pill</UiButton>
<UiButton shape="square">Square</UiButton>
<UiButton shape="pill" icon-only aria-label="Add">
<UiIcon name="mdi:plus" class="w-5 h-5" />
</UiButton>
</div>Block
block stretches the button to the full width of its container.
<div class="max-w-sm">
<UiButton block>Full-width action</UiButton>
</div>Menu and list rows
The menu-item and list-item variants are full-width, left-aligned rows for dropdowns and settings lists.
<div class="w-60 rounded-xl border border-gray-200 p-1 dark:border-gray-700">
<UiButton variant="menu-item"><UiIcon name="mdi:pencil" class="w-4 h-4" /> Edit</UiButton>
<UiButton variant="menu-item"><UiIcon name="mdi:content-copy" class="w-4 h-4" /> Duplicate</UiButton>
<UiButton variant="menu-item" color="red"><UiIcon name="mdi:trash-can-outline" class="w-4 h-4" /> Delete</UiButton>
</div>Props
| Name | Type | Default | Description |
|---|---|---|---|
| tag | string | 'button' | HTML element (or component) to render as. buttonadivany valid tag |
| nativeType | string | 'button' | Native `type`, only applied when the tag is 'button'. buttonsubmitreset |
| variant | string | 'solid' | Visual style controlling background, border and hover. solidoutlineghostdashedtextlinkmenu-itemlist-item |
| color | string | 'primary' | Colour theme. primarygrayredgreenamberwhite |
| size | string | 'md' | Padding, font size and gap. xssmmdlgxl |
| shape | string | 'round' | Border-radius shape. For a circular icon button, use pill with icon-only. roundpillsquare |
| disabled | boolean | false | Dims the button and blocks interaction. |
| loading | boolean | false | Shows a spinner and disables the button. |
| loadingStyle | string | 'spinner' | 'spinner' replaces content; 'icon' keeps it and exposes a `spinning` slot prop. spinnericon |
| spinner | string | 'mdi:loading' | MDI icon used for the spinner. |
| block | boolean | false | Full-width layout. |
| iconOnly | boolean | false | Equal padding for a square or circular icon button. |
| href | string | undefined | URL, only applied when the tag is 'a'. |
| title | string | undefined | Native `title` tooltip. |
| ariaLabel | string | undefined | Accessible label for screen readers. |
| ariaChecked | string | boolean | undefined | ARIA checked state for toggle-style buttons. |
| role | string | undefined | ARIA role override (e.g. 'switch', 'tab'). |
| tabindex | string | number | undefined | Keyboard navigation order. |
Slots
| Slot | Description |
|---|---|
default | Button content: label text, icons, or any children. |