open-ui

open-ui copied to clipboard

This issue is for collecting use cases for a button with a pressed state. Sometimes referred to as toggle buttons (but that's an overloaded term), or aria-pressed buttons (but that's an implementation detail).

I'm not looking for ideas on how this could be implemented (e.g. checkbox, switch, select), just for examples of how it would be used.

The usecase shouldn't need more than 2 states (for now lets ignore the aria-pressed mixed case unless you've a strong example)

If you want something like a "toggle" button but want more states, see https://github.com/openui/open-ui/issues/1040

The use case example I see most often is bold/italic/underline.

• Material Design uses bold/italic/underline as the examples (they also classify text-alignment as "toggle" but that's actually tabs not toggle as you can only select one at a time). They also have a favourite ❤️ button example.

• Shadcn uses bold/unbold as the example

• Fluent UI includes a toggle button but the docs site doesn't have any real-world example use cases

• Salesforce have a follow/unfollow button example. Twitter is also another obvious example of that use case. Also bookmark/unbookmark button on Twitter.

• Prime Vue uses a locked/unlocked example. Their docs site is using a toggle button to select between light/dark mode

• This article from Inclusive Components uses a play/pause button as an example. That's also something Jeremy Keith talks about in an article of his referring to a play/pause button used on The Session website.

• Many examples of show/hide eyeball button for password fields and other sensitive fields

• Goldman Sachs has a "toggle tag" example for filtering. This is relatively common. See also Google Fonts filter below:

• Google Meet/Zoom and other video conferencing apps: raise hand/lower hand toggle. webcam on/off. mute/unmute your microphone. Mute/unmute audio. captions on/off

• Trello: enable/disable colorblind mode

A pretty common pattern is that a button, after being pressed, can be unpressed, but pressing another button will also automatically unpress it, so only zero or one options can be pressed at a time. Styling the background of a Trello board is one of many examples of this.

YouTube music has this sort of button for it's mute icon button. The iconogrophy changes but the label is just "Mute"

We have some toggle buttons in Bootstrap documentation (visually identical but technically slightly different for a11y reasons), but without any real-world example use cases:

• Checks and radios > Toggle buttons
• Buttons > Button plugin > Toggle states

In some Orange websites (using a fork of Bootstrap for their web framework), it is frequent to see these toggle buttons used for filtering purpose as the Goldman Sachs example shared in https://github.com/openui/open-ui/issues/1039#issuecomment-2074548503.

rich text editors often use toggle buttons (pressed/not pressed states)

see TinyMCE's demo. Collapsed toolbar shows bold / italic which are toggles. Additional controls in the expanded toolbar are also toggles

Maybe the trigger button for a popover as in Google Docs which is pressed as long as the popover is open.

That wouldn’t be appropriate for a pressed/not pressed state. That would be an expanded/collapsed. That’s what popovertarget would expose, for instance

What is the difference between this and the <switch> element?

There are many such buttons in iOS or other mobile systems.

Similar in functionality (toggle between states) but different semantics / manner in which they are exposed to assistive technology

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.