---
url: "https://vueda.dev/v3/reference/theming/keys/Button.md"
title: "Button"
---

# Button

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The pressable root. Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_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](/v3/reference/api/vue/Button.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Button.md#theme-key-Button-root) | callback | The pressable root. Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_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. |

<a id="theme-key-Button-root"></a>

## root

> The pressable root. Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_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 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`