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

# _ButtonSecondary

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

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

> The `--secondary` surface fill: solid secondary background, secondary-foreground text. Hover and active swap to the `--secondary-hover` / `--secondary-active` lightness steps (darker in light mode, lighter in dark); the previous `/80` alpha hover was near-invisible because secondary sits almost on the page surface. Use for actions that sit beside a CTA without stealing it; a row of secondary buttons reads as a control cluster rather than a set of competing CTAs.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/_ButtonSecondary.md#theme-key-_ButtonSecondary-root) | 2 classes | The `--secondary` surface fill: solid secondary background, secondary-foreground text. Hover and active swap to the `--secondary-hover` / `--secondary-active` lightness steps (darker in light mode, lighter in dark); the previous `/80` alpha hover was near-invisible because secondary sits almost on the page surface. Use for actions that sit beside a CTA without stealing it; a row of secondary buttons reads as a control cluster rather than a set of competing CTAs. |

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

## root

> The `--secondary` surface fill: solid secondary background, secondary-foreground text. Hover and active swap to the `--secondary-hover` / `--secondary-active` lightness steps (darker in light mode, lighter in dark); the previous `/80` alpha hover was near-invisible because secondary sits almost on the page surface. Use for actions that sit beside a CTA without stealing it; a row of secondary buttons reads as a control cluster rather than a set of competing CTAs.

Default classes:

```text
bg-secondary text-secondary-foreground hover:bg-secondary-hover active:bg-secondary-active
disabled:bg-disabled disabled:text-disabled-foreground disabled:shadow-none
```

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