-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(kbutton): add appearance="none" to button #2469
Conversation
✅ Deploy Preview for kongponents-sandbox ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for kongponents ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
When we utilize an icon button, or button with icon, and with As examples here, ideally, the button would still align with the other buttons in the row, just without the background color, etc. We'd still want the gap between the icon + text, and the padding around the icon (probably?) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🚀
# [9.13.0](v9.12.1...v9.13.0) (2024-10-23) ### Features * **kbutton:** add appearance="none" to button ([#2469](#2469)) ([30fb03a](30fb03a))
🎉 This PR is included in version 9.13.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Summary
This PR adds a
none
value to the<KButton>
appearance
prop, enabling buttons to render with minimal styling similar to a<div>
. This allows for fully custom styles while retaining<KButton>
features like link rendering to links, cursor styles, and disabled states.Changes
New Appearance:
none
<KButton>
with minimal styles (border-box
,cursor
) for custom styling.Style Refactoring
.k-button
no longer applies primary styles unless theprimary
class is present to make overriding easier.primary outline
classes to maintain backward compatibility whenappearance="outline"
(or any other invalid values).Disabled Link Behavior
pointer-events: none
to ensurecursor: not-allowed
displays correctly for consistency.