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

# _ButtonPrimaryOutline

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

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

> The primary outline recipe pairs a DPR-aware `--primary` hairline with readable `--primary-text` over `--background` (dark mode keeps `bg-input/30`). Hover and active add a primary tint (`/10` then `/15`) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/_ButtonPrimaryOutline.md#theme-key-_ButtonPrimaryOutline-root) | 3 classes | The primary outline recipe pairs a DPR-aware `--primary` hairline with readable `--primary-text` over `--background` (dark mode keeps `bg-input/30`). Hover and active add a primary tint (`/10` then `/15`) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions. |

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

## root

> The primary outline recipe pairs a DPR-aware `--primary` hairline with readable `--primary-text` over `--background` (dark mode keeps `bg-input/30`). Hover and active add a primary tint (`/10` then `/15`) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions.

Default classes:

```text
hairline hairline-primary bg-background text-primary-text dark:bg-input/30
hover:bg-primary/10 active:bg-primary/15
disabled:!shadow-none disabled:bg-transparent disabled:text-disabled-foreground
```

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