Skip to main content

Button disabled state visual effects fix (WEB-1203)

Version: 0.7.0 ยท Type: ๐Ÿ› Bug Fix

WEB-1203

Problemโ€‹

When a Button is disabled, clicking or hovering over it could still trigger visual effects (border color changes, background shifts, ring effects) due to CSS pseudo-class selectors like hover: and active: taking precedence over or leaking past the disabled: state. This was especially visible in variants with explicit borders (secondary, destructive-outline) where disabled + clicked state would show unintended styling changes.

The root cause: disabled buttons have pointer-events-auto enabled (to show cursor-not-allowed), which allows hover and active pseudo-classes to match despite the disabled state. Without explicit disabled:hover: and disabled:active: guards, the base hover/active styles could still apply.

Changed Filesโ€‹

  • packages/design/src/components/Button/styles.ts

Changesโ€‹

  1. Added disabled:hover:no-underline and disabled:active:no-underline to BUTTON_BASE_CLASS as a catch-all for link-type buttons.
  2. For each variant in BUTTON_DISABLED_CLASS, added explicit disabled:hover: and disabled:active: guards:
    • primary / destructive: disabled:hover:bg-<disabled-bg>, disabled:active:bg-<disabled-bg>, disabled:active:ring-0
    • secondary: disabled:hover:bg-<disabled-bg>, disabled:active:bg-<disabled-bg> (prevents border/background shifts on click)
    • tertiary / quaternary: disabled:hover:bg-transparent, disabled:active:bg-transparent
    • destructive-outline: disabled:hover:bg-transparent, disabled:active:bg-transparent (prevents border color leak)
    • link-color / link-gray: disabled:hover:no-underline, disabled:active:no-underline
  3. These guards override any hover/active pseudo-class effects, ensuring disabled buttons maintain a consistent visual state regardless of user interaction.

Impactโ€‹

  • Disabled buttons now provide clear, unambiguous visual feedback that they cannot be interacted with
  • No visual flicker or unexpected style changes on click/hover
  • Consistent disabled appearance across all button variants