Components
Button
Trigger actions with UiButton — variants, colors, sizes, and groups.
UiButton is the primary action trigger. Style it with variant, color it with color, and scale it with size.
Add a button
<template>
<UiButton variant="filled" color="primary" text="Save" />
</template>
Choose a variant
<template>
<UiButton variant="filled" text="Filled" />
<UiButton variant="tonal" color="primary" text="Tonal" />
<UiButton variant="outline" text="Outline" />
<UiButton variant="text" text="Text" />
<UiButton variant="gradient" color="primary" text="Gradient" />
</template>
Apply a color
<template>
<UiButton variant="filled" color="success" text="Success" />
<UiButton variant="filled" color="warning" text="Warning" />
<UiButton variant="filled" color="danger" text="Danger" />
</template>
Size, state, and width
<template>
<UiButton variant="filled" size="sm" text="Small" />
<UiButton variant="filled" size="lg" text="Large" />
<UiButton variant="filled" :loading="true" text="Saving" />
<UiButton variant="filled" :disabled="true" text="Disabled" />
<UiButton variant="filled" fluid text="Full width" />
</template>
Add an icon
Use the #icon slot; set iconTrailing to place it after the label:
<template>
<UiButton variant="filled" text="Download" :icon-trailing="true">
<template #icon>
<!-- any Material Symbols code point -->
<UiIconMaterial icon-code="" />
</template>
</UiButton>
</template>
Group buttons
<template>
<UiButtonGroup connected>
<UiButton variant="outline" text="Left" />
<UiButton variant="outline" text="Middle" />
<UiButton variant="outline" text="Right" />
</UiButtonGroup>
</template>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | null | — | Button label. |
variant | 'filled' | 'tonal' | 'outline' | 'text' | 'link' | 'chip' | 'cta' | 'gradient' | 'frosted' | 'filled' | Visual style. |
color | 'primary' | 'secondary' | 'accent' | 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'white' | 'black' | 'transparent' | — | Semantic color (with filled / tonal). |
size | 'sm' | 'md' | 'lg' | — | Button size. |
icon | boolean | false | Icon-only mode (no label required). |
iconTrailing | boolean | false | Place the icon after the label. |
loading | boolean | false | Show a spinner and block interaction. |
disabled | boolean | false | Disable the button. |
rounded | boolean | false | Fully rounded shape. |
fluid | boolean | false | Full-width (btn-block). |
tooltipText | string | null | — | Tooltip text. |
customClass | string | string[] | Record<string, boolean> | null | — | Extra classes. |
Emits: onClick (the native @click also works via the underlying <button>).
Slots: #icon, plus text content.
Related:
UiButtonMenu (dropdown), UiButtonToggleGroup (segmented toggles), UiButtonFabGroup (floating actions), and UiButtonTooltip.