Refactor button styles and component structure #311
+70
−27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This update modernizes the Button component’s visual design and interaction feedback while keeping its existing API and behavior fully intact. The goal was to improve perceived quality, accessibility, and consistency without introducing breaking changes or additional dependencies. Signed-off-by: Dev00-1 <devmalang.2005@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What’s Improved : -
Refined typography (15px, tighter tracking, stronger weight) for a more modern look.
Enhanced gradient styling for the primary button to add depth and balance.
Introduced subtle hover “sheen” for premium UI feel.
Standardized border-radius usage across sizes for visual consistency.
Added tactile press feedback using subtle scale and shadow adjustments.
Improved hover and active states without JavaScript or animation libraries.
Respected user motion preferences using motion-reduce.
Improved disabled states to feel intentional (grayscale + cursor feedback).
Preserved focus-visible rings for keyboard navigation.
Ensured SVG icons remain consistent and layout-safe.
Consolidated base styles for better readability and maintainability
Fixed invalid Tailwind utility usage (hidden md:flex)
Kept the component fully compatible with cva, asChild, and existing variants