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
ghost
-variants should also be offered in normal dimensions
#434
Comments
Yeah, the ghost variants without negative margin would be nice. I have been adding a tiny margin manually to achieve this. |
This might be interesting and I agree that in some cases it makes sense. We'll consider a way to do that, for now |
Unfortunately, since v3.0 the Rather than finding all the dimensional edge-cases for .rt-BaseButton.override-ghost {
/** reset the default variant */
box-shadow: none;
background: none;
/* copied from https://github.com/radix-ui/themes/blob/c7f02af3fc400dadb293a85ba89e437c2dbba54f/packages/radix-ui-themes/src/components/base-button.css#L321 */
color: var(--accent-a11);
&:where(.rt-high-contrast) {
color: var(--accent-12);
}
&:where([data-disabled]) {
color: var(--gray-a8);
background-color: var(--gray-a3);
}
/* copied from https://github.com/radix-ui/themes/blob/c7f02af3fc400dadb293a85ba89e437c2dbba54f/packages/radix-ui-themes/src/components/base-button.css#L357 */
@media (hover: hover) {
&:where(:hover) {
background-color: var(--accent-a3);
}
}
&:where(:focus-visible) {
outline: 2px solid var(--focus-8);
outline-offset: -1px;
}
&:where([data-state="open"]) {
background-color: var(--accent-a3);
}
&:where(:active:not([data-state="open"])) {
background-color: var(--accent-a4);
}
&:where([data-disabled]) {
color: var(--gray-a8);
background-color: transparent;
}
} <IconButton class="override-ghost" /> On a side-note: the prop-system of |
I'm not sure what you mean exactly. Don't think we changed that for 3.0; do you have an example of the issue where |
Maybe I'm misremembering, but switching from an older version to 3.0 I found that many of my buttons where misaligned inside flex layouts. In the source code now, there are many overrides for ghost buttons: themes/packages/radix-ui-themes/src/components/base-button.css Lines 32 to 37 in c7f02af
|
I can't say more without seeing the exact code that produced that screenshot. Did you give it a go with
To be fair, if you need completely different variants beyond simple overrides, I'd recommend to create your own components on top of the CSS variables that Radix Themes provides. This would be the most sturdy way going forward and you can be sure they won't break when the implementation details change in further versions. |
You're right, sry. Perhaps the changes was seeing were due to an unrelated change on my end.
I did. The button still is smaller, probably due to these lines: themes/packages/radix-ui-themes/src/components/icon-button.css Lines 9 to 15 in c7f02af
The reason why I enjoy Radix Themes so much, is that the For example, #323 could be solved by this: Keep the |
Here's a sandbox of the style that I see most commonly in settings where https://codesandbox.io/p/sandbox/recursing-christian-jq5frh |
Ghost buttons are currently optimized for being displayed inline in text, with reduced padding and inverted margins.
However, I often find myself wishing for buttons that appear without borders while still being consistent with other bordered buttons.
From frequently seeing this approach in other interfaces, I believe that this use-case is at least as common as the inline variant.
In all these examples (except maybe 4), I'd say that Radix's approach would have looked worse.
It would be great if we could choose the preferred approach through props:
ghost
- andinline-ghost
-variantsinline
, that inverts the margins. This would make both the API and implementation more consistent. It would also mean that the inverted margin can be used with bordered variants. Although this may seem weird at first, I can actually think of some cases where you would want a bordered button that grows out of its parent.The text was updated successfully, but these errors were encountered: