ui icon indicating copy to clipboard operation
ui copied to clipboard

fix(button): add aria-invalid border for all variants

Open nathannewyen opened this issue 1 month ago • 1 comments

Summary

  • Add aria-invalid:border to Button component base styles
  • Enables visible aria-invalid feedback for all button variants

Fixes #8920

Description

The Button component had aria-invalid:border-destructive in its base classes, but this only worked for the outline variant which already has a border class. Other variants (default, secondary, ghost, destructive, link) showed no visual feedback when aria-invalid was set.

Before: Only outline variant showed red border on aria-invalid After: All variants show red border on aria-invalid

Changes

Added aria-invalid:border before aria-invalid:border-destructive in:

  • apps/v4/registry/new-york-v4/ui/button.tsx
  • templates/monorepo-next/packages/ui/src/components/button.tsx

Testing

Tested all button variants with aria-invalid attribute:

  • ✅ default - now shows red border
  • ✅ secondary - now shows red border
  • ✅ ghost - now shows red border
  • ✅ destructive - now shows red border
  • ✅ outline - still works as before
  • ✅ link - now shows red border

nathannewyen avatar Dec 09 '25 16:12 nathannewyen

@nathannewyen is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

vercel[bot] avatar Dec 09 '25 16:12 vercel[bot]