#434·themes

`ghost`-variants should also be offered in normal dimensions

Author: SebKranzCreated Apr 3, 2024Updated Jun 26, 2026
Labelsrequest

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.

Screenshot 2024-03-17 at 23 39 29Screenshot 2024-03-18 at 14 56 36Screenshot 2024-04-03 at 21 27 21Screenshot 2024-04-03 at 20 51 43

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:

  • ...either offer both ghost- and inline-ghost-variants
  • ...or decouple the dimensions from the variant and provide a separate prop, inline, 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.