Repository navigation
REQUEST: Ghost Button type #857
Description
- I have searched the Issues to see if this bug has already been reported
- I have tested the latest version
Summary
I have seen this being used around the documentation and in some components, but there is no direct way of creating a <Button /> like, which looks like the class list is copied and pasted when needed. It would be really interesting in some cases, mainly with icon only buttons.
Context
Have a Ghost button type.
Activity
rluders commentedon Jul 14, 2023
This seems like a reasonable request, and I appreciate the suggestion, @nigellima. The implementation itself appears to be relatively straightforward, so it could be a good task to assign to new contributors.
To provide some additional context, ghost buttons are commonly used to achieve a transparent or outlined look with a visible border, while retaining the functionality of a button.
Considering our existing button variations like
pillandoutline, we should introduce a newghostproperty that will transform the button into this new style. In addition to implementing this feature, the following tasks should be completed:By completing these tasks, we can ensure the feature is well-tested, properly demonstrated, and effectively documented for users of our component library.
kharbandaashu commentedon Jul 18, 2023
Hey @rluders , I would like to work on this. Please assign to me.
tulup-conner commentedon Jul 20, 2023
I'm sorry, I think I'm being dense - I don't fully understand this request. I'm confused by what exactly "ghost" means here.
nigellima commentedon Jul 20, 2023
So in some libraries out there usually there is the button type called
ghost, which is basically this button that displays only the text/icon with padding but there is no visual indications of the boundaries, which you can only see the background/border if you hover the button, like this:In Flowbite there is this type too, which we can see in the documentation or in the dark theme toggle button. But there is no direct way of having this Button type without copying the classes from the existing examples. Hence the suggestion of having a
<Button ghost />or maybe<Button color="ghost" />.I checked internally in the documentation and in the library and the places that have this ghost styled button the tailwind classes are being copied and pasted around
tulup-conner commentedon Jul 20, 2023
@nigellima Thank you very much!
feat(button): created "ghost" color
SutuSebastian commentedon Oct 28, 2026
Tracking via open PR #1684 (prior attempt #1268 closed unmerged). Keeping open until that merges.