[ToggleButtonGroup] Add variant prop for consistency with Button/ButtonGroup

[beaniebag]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

variant prop added to at minimum support "outlined" | "contained" options when selected

Examples 🌈

ButtonGroup and Button have this feature

Motivation 🔦

Consistency within my application. Majority of my buttons use "contained" variant. By default this button is outlined and clashes with desired design.

[ZeeshanTamboli]

@oliviertassinari Should we mark this as a "new feature" or "out of scope" since it can be customized as said in #23446?

[hbjORbj]

Duplicate of #23446

We suggest you to simply customise the component. More explanation: #23446 (comment)

[beaniebag]

Thanks. Thought I did click the New Feature option when creating this issue.
For anyone in the future that want's the toggle button to be contained when selected. This was the styling I used:

const ContainedPrimaryToggleButton = styled(ToggleButton)(({ theme }) => ({
color: theme.palette.primary.main,
"&.Mui-selected": {
color: "white",
backgroundColor: theme.palette.primary.main,
},
"&.Mui-selected:hover": {
backgroundColor: theme.palette.primary.dark,
},
}));