Skip to content
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

REQUEST: Ghost Button type #857

Open
2 tasks done
nigellima opened this issue Jul 14, 2023 · 5 comments · May be fixed by #1268
Open
2 tasks done

REQUEST: Ghost Button type #857

nigellima opened this issue Jul 14, 2023 · 5 comments · May be fixed by #1268
Labels
good first issue Good for newcomers help wanted Extra attention is needed 🚀 enhancement New feature or request

Comments

@nigellima
Copy link
Collaborator

  • 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.

image image

Context

Have a Ghost button type.

@rluders rluders added 🚀 enhancement New feature or request good first issue Good for newcomers labels Jul 14, 2023
@rluders
Copy link
Collaborator

rluders commented 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 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
Copy link
Contributor

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

@tulup-conner
Copy link
Collaborator

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
Copy link
Collaborator Author

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:

ghost-button

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

flowbite-button-ghost

@tulup-conner
Copy link
Collaborator

@nigellima Thank you very much!

@tulup-conner tulup-conner added the help wanted Extra attention is needed label Jan 1, 2024
nigellima added a commit to gistia/flowbite-react that referenced this issue Feb 10, 2024
Creates a new color type called "ghost", which basically uses the design of the dark theme toggle component

Fix themesberg#857
@nigellima nigellima linked a pull request Feb 10, 2024 that will close this issue
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers help wanted Extra attention is needed 🚀 enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants