Button
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>
Render as a link
Pass to or href to render button styling on a link instead of a <button>. Without either, UiButton always renders its native <button> markup — as alone has no effect.
<template>
<!-- Plain / external link (renders <a>) -->
<UiButton variant="filled" color="primary" text="Docs" href="https://colorffy.com" />
<!-- Internal path (also renders <a> by default) -->
<UiButton variant="outline" text="Dashboard" to="/dashboard" />
<!-- Router-aware component -->
<UiButton variant="text" text="Profile" to="/profile" as="router-link" />
<!-- Disabled link: no href, aria-disabled, click is blocked -->
<UiButton variant="filled" text="Locked" href="/dashboard" :disabled="true" />
</template>
Link resolution mirrors IBaseLinkProps-style components (UiNavbarLink, UiBreadcrumb): a string to/href renders a plain <a> (or forces <a> when the URL looks external), an object to defers to as. disabled in link mode removes href, sets aria-disabled, adds a .disabled class, and blocks the click handler — since disabled isn't a real attribute on non-form elements.
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. |
type | 'button' | 'submit' | 'reset' | 'button' | Native <button> type. Ignored in link mode. |
to | string | object | — | Navigation target. Setting to (or href) switches to link mode. |
href | string | — | External/plain href. Setting href (or to) switches to link mode. |
as | string | object | 'a' | Tag/component for link mode. Only used when to or href is set. |
Emits: onClick (the native @click also works via the underlying <button> or, in link mode, the rendered <a>/component).
Slots: #icon, plus text content.
UiButtonMenu (dropdown), UiButtonToggleGroup (segmented toggles), UiButtonFabGroup (floating actions), and UiButtonTooltip.