Actions
Button
The base clickable action element, with size/color/variant options and optional icon/link behavior.
<UiButton />Size
size is the size of the button.
To
to swaps the underlying element for a NuxtLink — an internal path is routed client-side, an absolute URL renders as a plain anchor.
Setting both to and disabled renders a plain <button>, not a NuxtLink — disabled links can't be prevented from navigating any other way.
Target
target is only meaningful alongside to, where the button renders as a real link. Set it to _blank to open in a new tab.
Variant
variant is four levels of emphasis: solid for the primary action on a page, subtle beside it, soft where a full fill would be too loud, and ghost for the quietest actions — a toolbar icon button, say.
Color
color themes the button across every variant. Keep it tied to meaning rather than decoration: error on the button that deletes something, neutral for everything that just navigates.
solid
subtle
soft
ghost
Icon
icon renders before the label — or on its own, which is what a ghost icon button in a toolbar wants.
Omit the default slot (no text) to get a square icon-only button automatically; passing slot content switches it to a padded, non-square layout.
Icon size
iconSize is scaled to the button by default, so it usually needs nothing. Set it explicitly when the icon should carry more weight than the label — or less.
Disabled
disabled disables interaction with the button.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending"'neutral'number | "xs" | "sm" | "md" | "lg" | "xl"'sm' on a small button, 'md' otherwiseSlots
defaultTypes
type Variant = "solid" | "subtle" | "soft" | "ghost";type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";