Button
Source: client/lib/theme/vueda-tailwind/controls/index.js
The pressable root. Composes _ButtonBase.root plus the
_Button*primitive for the resolved (tone, emphasis) cell (seecontrols/button/buttonVariant.js), then layers the per-size height / padding pair frombase.css § Control sizing(orsize-vueda-control*for icon-only sizes). Thelinkemphasis skips the control-height block and goes inline. Thedata-state=cooldownstate (set by the component while a one-shot action is recovering) mutes the label to--muted-foregroundand suppresses hover so a recently-clicked button reads as "wait" without changing layout.
Vue component: Button
| Slot | Default classes | Description |
|---|---|---|
| root | callback | The pressable root. Composes _ButtonBase.root plus the _Button* primitive for the resolved (tone, emphasis) cell (see controls/button/buttonVariant.js), then layers the per-size height / padding pair from base.css § Control sizing (or size-vueda-control* for icon-only sizes). The link emphasis skips the control-height block and goes inline. The data-state=cooldown state (set by the component while a one-shot action is recovering) mutes the label to --muted-foreground and suppresses hover so a recently-clicked button reads as "wait" without changing layout. |
root
The pressable root. Composes _ButtonBase.root plus the
_Button*primitive for the resolved (tone, emphasis) cell (seecontrols/button/buttonVariant.js), then layers the per-size height / padding pair frombase.css § Control sizing(orsize-vueda-control*for icon-only sizes). Thelinkemphasis skips the control-height block and goes inline. Thedata-state=cooldownstate (set by the component while a one-shot action is recovering) mutes the label to--muted-foregroundand suppresses hover so a recently-clicked button reads as "wait" without changing layout.
Callback:
({ tone, emphasis, size }) => {
const resolved = resolveButtonVariant({ tone, emphasis });
const primitiveKey = `${resolved.primitive}.root`;
const cooldownClass = [
"data-[state=cooldown]:text-muted-foreground",
"data-[state=cooldown]:cursor-default",
"data-[state=cooldown]:hover:bg-transparent",
"data-[state=cooldown]:hover:text-muted-foreground",
];
if (resolved.inline) {
return {
composes: ["_ButtonBase.root", primitiveKey],
class: [
// Link sizing.
"h-auto px-0",
// Cooldown state.
...cooldownClass,
],
};
}
return {
composes: ["_ButtonBase.root", primitiveKey],
class: [
// Size classes.
{
"h-vueda-control px-vueda-control-px has-[>svg]:px-vueda-control-px-sm":
!size || size === "default",
"h-vueda-control-sm gap-1.5 px-vueda-control-px-sm": size === "sm",
"h-vueda-control-lg px-vueda-control-px-lg has-[>svg]:px-vueda-control-px": size === "lg",
"size-vueda-control": size === "icon",
"size-vueda-control-sm": size === "icon-sm",
"size-vueda-control-lg": size === "icon-lg",
},
// Cooldown state.
...cooldownClass,
],
};
}Source: client/lib/theme/vueda-tailwind/controls/Button.theme.js:27