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

# _ButtonDestructiveGhost

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

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

> The transparent-at-rest destructive recipe: `--destructive` text with no fill or edge until hover, when a low-alpha `--destructive` tint paints the background (`/10` hover, `/15` active) and focus swaps to the destructive outline. The lowest-weight destructive affordance, for a cautionary action inside a dense cluster (a row's delete glyph, a menu-adjacent strip) where even an outlined chip would be too heavy.

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/_ButtonDestructiveGhost.md#theme-key-_ButtonDestructiveGhost-root) | 3 classes | The transparent-at-rest destructive recipe: `--destructive` text with no fill or edge until hover, when a low-alpha `--destructive` tint paints the background (`/10` hover, `/15` active) and focus swaps to the destructive outline. The lowest-weight destructive affordance, for a cautionary action inside a dense cluster (a row's delete glyph, a menu-adjacent strip) where even an outlined chip would be too heavy. |

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

## root

> The transparent-at-rest destructive recipe: `--destructive` text with no fill or edge until hover, when a low-alpha `--destructive` tint paints the background (`/10` hover, `/15` active) and focus swaps to the destructive outline. The lowest-weight destructive affordance, for a cautionary action inside a dense cluster (a row's delete glyph, a menu-adjacent strip) where even an outlined chip would be too heavy.

Default classes:

```text
text-destructive
hover:bg-destructive/10 active:bg-destructive/15 focus-visible:outline-destructive
disabled:text-disabled-foreground
```

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