[ToggleButton][Joy] Add ToggleButton component

[siriwatknp]

closes #36617

New

• Joy UI does not provide a ToggleButton component (It's simple enough to do it on the developer side).
• Joy UI provides a ToggleButtonGroup (using the same styles as the ButtonGroup) that can wrap Button and IconButton.
• The pressed state uses the active variant styles.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/toggle-button-group/toggle-button-group.md

@mui/joy: parsed: +0.76% , gzip: +0.75%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against cc4b8b4

[siriwatknp]

Preview: https://deploy-preview-37716--material-ui.netlify.app/experiments/joy/toggle-button/

With box-shadow:

Screen.Recording.2566-06-25.at.12.06.14.mov

Without box-shadow:

Screen.Recording.2566-06-25.at.12.06.44.mov

@zanivan Which version do you prefer 👆?

[zanivan]

@siriwatknp I'm just adding it here to keep it documented:

• Go with the version without box-shadow
• Use Active color on pressed state instead of hover

[siriwatknp]

@zanivan it looks better with active background!

Screen.Recording.2566-06-27.at.09.33.54.mov

[siriwatknp]

@zanivan Ready for the first review! https://deploy-preview-37716--material-ui.netlify.app/joy-ui/react-toggle-button/

[zanivan]

@siriwatknp It looks good! I've just added some tweaks to the texts. While I was reviewing, two things came to my mind:

1. I wonder if on the first demo, we shouldn't use the same styling as the active? Though the idea of showing some customization is good, I believe that it'd be better to show the users how to use aria-pressed on buttons and keep the cohesive and consistent design across the lib.
2. As we actually don't have a ToggleButton, and only a ToggleButtonGroup, wouldn't it be better to rename the page? When I read it for the first time, it was a bit awkward to start the Toggle Button page with Joy UI does not provide a ToggleButton component 😅

[siriwatknp]

@siriwatknp It looks good! I've just added some tweaks to the texts. While I was reviewing, two things came to my mind:

1. I wonder if on the first demo, we shouldn't use the same styling as the active? Though the idea of showing some customization is good, I believe that it'd be better to show the users how to use aria-pressed on buttons and keep the cohesive and consistent design across the lib.
2. As we actually don't have a ToggleButton, and only a ToggleButtonGroup, wouldn't it be better to rename the page? When I read it for the first time, it was a bit awkward to start the Toggle Button page with Joy UI does not provide a ToggleButton component 😅

That makes a lot of sense. Let me update the page.

[siriwatknp]

@zanivan I think it is ready!

[zanivan]

Maybe wait for a review from @danilo-leal or @samuelsycamore to polish out the copy a bit if needed, but it looks good to me! ✨

[danilo-leal]

Looking great! Gave it a shot at the docs formatting/editing but @samuelsycamore should definitely take a look everything's sounding good!