Skip to content

_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.

SlotDefault classesDescription
root3 classesThe 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.

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