Skip to content

Conversation

@Abhishek6969-69
Copy link

Summary
Adds a subtle :active (pressed) state to the shared Button component to improve click/tap feedback. The effect is a slight scale down (0.98) plus a tiny brightness reduction. Reduced-motion users are respected.

Why
Improves perceived responsiveness, especially on mobile/touch devices, and aligns the component with common UX patterns.

Implementation

  • Added active:scale-[0.98] active:brightness-95 motion-reduce:active:scale-100 to the button base class in Button component.

Testing checklist

  • Click a primary button on desktop: see slight scale-down + darker look while mouse is pressed.
  • Tap a button on mobile: tactile visual feedback appears (scale + brightness).
  • Verify hover styles remain unchanged.
  • Verify disabled buttons show no active feedback.
  • Turn on OS Reduce Motion and verify there is no scale animation.
  • Keyboard focus via Tab still shows the correct focus-visible ring.
  • Visual regression / Storybook checks if applicable.

Notes
If maintainers prefer variant-specific styling instead of a global default, I can adjust in a follow-up.

@vercel
Copy link
Contributor

vercel bot commented Dec 6, 2025

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

A member of the Team first needs to authorize it.

@Abhishek6969-69 Abhishek6969-69 marked this pull request as draft December 8, 2025 15:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant