search

shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
69.09k stars 4.1k forks source link

[bug]: Toggle button does not work well on mobile (and confusing on desktop) #4457

Open nareshbhatia opened 1 month ago

nareshbhatia commented 1 month ago

Describe the bug

The Toggle button has the following background colors for the hover and on states:

Unfortunately both these colors map to the same physical color (e.g. neutral-100 in light mode and neutral-800 in dark mode). This makes it very difficult to tell if the button is on or off in certain situations. The worst case is the Toggle button on a mobile which is in the off state, but still appears to be on. That's because on the mobile, the button stays in the hover mode even after it is tapped. The issue is less severe on the desktop where the confusion only occurs when you click the button and your cursor is still on it. In this case, even when the button is turned off, it shows the hover color giving the perception that it is on.

The screenshot below is for a outline button on mobile which is turned off, but still looks like it is on:

IMG_2497

You can try this in the docs at https://ui.shadcn.com/docs/components/toggle#outline

Affected component/components

Toggle, Toggle Group

How to reproduce

  1. Go to https://ui.shadcn.com/docs/components/toggle#outline on a mobile phone
  2. Toggle the outline button on
  3. Toggle the outline button off

The button appears as if it is on.

Codesandbox/StackBlitz link

https://ui.shadcn.com/docs/components/toggle#outline

Logs

No response

System Info

MacOS / iOS
Chrome

Before submitting

lucifersosad commented 1 month ago

thank u so much

nullnullsieben commented 1 month ago

https://www.instagram.com/1900_officelle?igsh=MW5ueDI0b21qbW44Zg==

lucifersosad @.***> schrieb am Mo., 5. Aug. 2024, 08:08:

thank u so much

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/4457#issuecomment-2268246941, or unsubscribe https://github.com/notifications/unsubscribe-auth/BIO77CPK37L4KS3AGWKIKEDZP4JGVAVCNFSM6AAAAABLVS2HG2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDENRYGI2DMOJUGE . You are receiving this because you are subscribed to this thread.Message ID: @.***>