[ToggleButton] Implement ToggleButton

[dungle-scrubs]

I'd like to style a <ToggleButton> to look and behave exactly like a <Button> without explicitly overriding all of the ToggleButton's class styles.

I've learned that I can inject Button styles this way:

<ToggleButton
  classes={{
    root: 'MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSecondary MuiButton-disableElevation',
    selected: 'MuiButton-root:hover MuiButton-containedSecondary:hover MuiButton-disableElevation:active MuiButton-disableElevation:hover MuiButton-contained:active MuiButton-contained:hover',
  }}
>

This halfway solves my problem. However, I'd like to avoid injecting the classes MuiToggleButton-root MuiToggleButtonGroup-grouped MuiToggleButtonGroup-groupedHorizontal because they're overriding the ones I've added above.

Is this sort of thing possible? The reason I'm trying this is because I can't put a <Button> inside of a <ToggleButton> without getting an error, so I figured I'd try to make it look and behave like a <Button>.

Thanks

[mnajdova]

I don't quite understand the issue.

I'd like to style a <ToggleButton> to look and behave exactly like a <Button> without explicitly overriding all of the ToggleButton's class styles.

If you like it to behave like a Button, why don't you use the Button?

Is the use-case that you would like to actually use a ToggleButton that looks like Button? What about the toggled state?
It would partially be possible to do this once we have unstyled version of this component, once we have it.

[dungle-scrubs]

@mnajdova Thanks, sorry I forgot to clarify something. I'm using ToggleButton for radio-button-like functionality, but I need the radios to look exactly like <Button>, including hover and active states.

I couldn't get Mui's <Radio> to style like a <Button> so I'm trying to use <ToggleButton> instead. However, I get an error when using <Button> inside of <ToggleButton>.

Does that make sense?

[mnajdova]

Got it yes, sounds like something that will be possible with the unstyled components. Until then, we don’t have option to reset styles.

[dungle-scrubs]

Thanks for clearing that up and looking forward to that. Until then, manually restyling isn't too big of a deal.

[oliviertassinari]

This makes me think about:

1. ButtonGroup and ToggleButton are very close in UI. We could have almost built ToggleButton on top of ButtonGroup.
2. ToggleButton adds functionality over ButtonGroup. In [Lab] Improve accessibility of ToggleButton and ToggleButtonGroup material-ui#17203 we explore how to improve the a11y.
3. Maybe we could extract the ToggleButton behavior into a headless hook, and expose it, which would allow @dungle-scrubs to implement the same behavior with a Button. I doubt that an unstyled component API would work for this use case.
4. Reading https://www.w3.org/TR/wai-aria-practices/examples/toolbar/toolbar.html, the hook we need might even be at the radio level, not sure.

[mj12albert]

TIL that aria-pressed (the main difference between the toggle button pattern and the "ordinary" button widget) is tristate and supports aria-pressed="mixed"

This is not mentioned in the APG at all, but it is in the aria specs

An example usage of this is "Collapse/Expand All" buttons that can bulk-control a whole Accordion/multiple Collapsibles: https://adrianroselli.com/2024/03/check-all-expand-all-controls.html#ARIA

CC @colmtuite

[mj12albert]

Looking at this issue discussing aria-pressed spec, I think the pressed/mixed state is a pretty niche thing that does have legitimate use-cases, and we should support it somehow