Skip to content

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 (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.

Vue component: Button

SlotDefault classesDescription
rootcallbackThe 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 (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.

Callback:

javascript
({ 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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2