_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), with the shadow-vueda-control micro-shadow. 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 (a low-emphasis delete in a toolbar or row).

Slot	Default classes	Description
root	2 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), with the shadow-vueda-control micro-shadow. 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 (a low-emphasis delete in a toolbar or row).

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), with the shadow-vueda-control micro-shadow. 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 (a low-emphasis delete in a toolbar or row).

Default classes:

hairline hairline-destructive bg-background text-destructive shadow-vueda-control dark:bg-input/30
hover:bg-destructive/10 active:bg-destructive/15 focus-visible:outline-destructive

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