REQUEST: Ghost Button type

[nigellima]

• [x] I have searched the Issues to see if this bug has already been reported
• [x] 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.

[rluders]

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 pill and outline, we should introduce a new ghost property that will transform the button into this new style. In addition to implementing this feature, the following tasks should be completed:

• Write unit tests to ensure the functionality and behavior of the ghost button.
• Update the storybook with the new ghost button component, showcasing its usage and variations.
• Update the documentation to include clear instructions and examples for incorporating the ghost button into projects.

By completing these tasks, we can ensure the feature is well-tested, properly demonstrated, and effectively documented for users of our component library.

[kharbandaashu]

Hey @rluders , I would like to work on this. Please assign to me.

[tulup-conner]

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]

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.

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]

@nigellima Thank you very much!