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.

Sign up for GitHub

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

Jump to bottom

bug: the background of btn-disabled (or disabled btn) should be transparent if combined with btn-ghost #3285

Open
tats-u opened this issue Nov 21, 2024 · 5 comments
Open

bug: the background of btn-disabled (or disabled btn) should be transparent if combined with btn-ghost #3285

tats-u opened this issue Nov 21, 2024 · 5 comments

Comments

@tats-u
Copy link

tats-u commented Nov 21, 2024 •
edited
Loading

What version of daisyUI are you using?

4.12.x

Which browsers are you seeing the problem on?

Chrome, Firefox

Reproduction URL

https://codepen.io/tats-u/pen/wvVLOJE

Describe your issue

image

<div><a href="//example.com/edit" class="btn btn-ghost btn-circle">✏</a> <span class="btn btn-ghost btn-disabled btn-circle">🗑️</span></div>
<div><button type="button" class="btn btn-ghost btn-circle">✏</button> <button type="button" disabled class="btn btn-ghost btn-circle">🗑️</button></div>
<div><button type="button" class="btn btn-primary btn-circle">✏</button> <button type="button" disabled class="btn btn-primary btn-circle">🗑️</button></div>

the background of disabled ghost buttons (the top 2 rows) should be transparent instead of gray.
@github-actions GitHub Actions
Copy link

Thank you @tats-u for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@tats-u tats-u changed the title bug: the background of btn-disabled if combined with btn-ghost should be transparent bug: the background of btn-disabled (or disabled btn) should be transparent if combined with btn-ghost Nov 21, 2024
@tats-u tats-u mentioned this issue Nov 21, 2024
Open
@saadeghi
Copy link
Owner

Then it wouldn't be obvious that it's disabled…

We don't want users to click on a button and wonder why it's not working. It should look clearly disabled.

@tats-u
Copy link
Author

tats-u commented Nov 23, 2024 •
edited
Loading

Then it wouldn't be obvious that it's disabled…

https://codepen.io/tats-u/pen/eYqqLRg

The first one is sufficient. The disabled icons are sufficiently pale compared to active ones. I doubt users will mistakenly click them.

image
image

The disabled icons in the last one look too obtrusive due to the gray background. We have to add ! before bg-transparent to remove the background.

@tats-u
Copy link
Author

tats-u commented Nov 23, 2024

At least users will try placing the mouse pointer on the "disabled" buttons with gray background once.

@tats-u
Copy link
Author

tats-u commented Nov 23, 2024 •
edited
Loading

I haven't seen the disabled ghost buttons with such a solid gray background surrounded by active ghost buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @tats-u