Toggle buttons (active/pressed state)

[janhassel]

Summary

Buttons should allow for an active/pressed state to indicate a feature/function/option is turned on or off, effectively working as a toggle.

Justification

A big use case for this is for icon-only buttons, for example to indicate text formatting, sidepanel statuses or options:

Examples

Keynote

Sketch

VSCode

Slack

Spotify

"Must have" functionality

A prop for the button component (like active, toggled, pressed or something like this) to enable and disable the respective styling.
The aria-pressed attribute must be set accordingly (https://www.w3.org/TR/wai-aria-practices-1.1/#button, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#toggle_buttons)

Available extra resources

Quick exploration with the text toolbar pattern:

From other libraries:

• Toggle button on Material Design
• Toggle button on FluentUI (last example)
• Selected button on Atlassian Design System
• Dual stateful button on Lightning Design System
• Toggle button on Bootstrap

I could submit a PR for this if the proposal is approved and the visual specification / color token to use is defined.

[tw15egan]

cc @carbon-design-system/design

[aagonzales]

Yup, I think this is something we would want to add either to the icon only ghost button or as a new component.

There is also an issue open for icon only content switcher #6982

[mjabbink]

Totally think we should add this.

[tw15egan]

Closing as resolved with #7900 and #7784. Feel free to reopen if we need to take any more action