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

# _ButtonDestructiveOutline

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

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

> The destructive neutral-chip recipe: a DPR-aware `--destructive` hairline and `--destructive` text over the `--background` fill (dark mode keeps the outline-family `bg-input/30` rest tint). The inset hairline avoids layout-width drift against fill buttons and uses the same saturated-edge fringing mitigation as inputs. Hover and active wash a low-alpha `--destructive` tint behind the label (`/10` then `/15`) so the chip warms toward danger on interaction without becoming a filled destructive CTA, and focus swaps to the destructive outline. Use for a reversible-but-cautionary action that should not carry the weight of a filled [\_ButtonDestructive](/v3/reference/theming/keys/_ButtonDestructive.md) (a low-emphasis delete in a toolbar or row).

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/_ButtonDestructiveOutline.md#theme-key-_ButtonDestructiveOutline-root) | 3 classes | The destructive neutral-chip recipe: a DPR-aware `--destructive` hairline and `--destructive` text over the `--background` fill (dark mode keeps the outline-family `bg-input/30` rest tint). The inset hairline avoids layout-width drift against fill buttons and uses the same saturated-edge fringing mitigation as inputs. Hover and active wash a low-alpha `--destructive` tint behind the label (`/10` then `/15`) so the chip warms toward danger on interaction without becoming a filled destructive CTA, and focus swaps to the destructive outline. Use for a reversible-but-cautionary action that should not carry the weight of a filled [\_ButtonDestructive](/v3/reference/theming/keys/_ButtonDestructive.md) (a low-emphasis delete in a toolbar or row). |

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

## root

> The destructive neutral-chip recipe: a DPR-aware `--destructive` hairline and `--destructive` text over the `--background` fill (dark mode keeps the outline-family `bg-input/30` rest tint). The inset hairline avoids layout-width drift against fill buttons and uses the same saturated-edge fringing mitigation as inputs. Hover and active wash a low-alpha `--destructive` tint behind the label (`/10` then `/15`) so the chip warms toward danger on interaction without becoming a filled destructive CTA, and focus swaps to the destructive outline. Use for a reversible-but-cautionary action that should not carry the weight of a filled [\_ButtonDestructive](/v3/reference/theming/keys/_ButtonDestructive.md) (a low-emphasis delete in a toolbar or row).

Default classes:

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

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