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

# _ButtonBase

_Composition primitive, consumed by leaf keys via `composes`._

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

> The shared button shell: inline-flex layout, 2px control radius, sm font-medium type, default 16px icon sizing, focus-visible ring, and the system-wide disabled treatment. Height and horizontal padding are omitted; the leaf picks a tier from `base.css § Control sizing`.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) | 7 classes | The shared button shell: inline-flex layout, 2px control radius, sm font-medium type, default 16px icon sizing, focus-visible ring, and the system-wide disabled treatment. Height and horizontal padding are omitted; the leaf picks a tier from `base.css § Control sizing`. |

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

## root

> The shared button shell: inline-flex layout, 2px control radius, sm font-medium type, default 16px icon sizing, focus-visible ring, and the system-wide disabled treatment. Height and horizontal padding are omitted; the leaf picks a tier from `base.css § Control sizing`.

Default classes:

```text
inline-flex items-center justify-center gap-2 whitespace-nowrap
rounded-vueda-control text-sm font-medium transition-all
disabled:pointer-events-none
[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4
shrink-0 [&_svg]:shrink-0
focus-visible:focus-ring
aria-invalid:hairline aria-invalid:hairline-destructive
```

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