search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.91k stars 32.27k forks source link

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

Closed beaniebag closed 1 year ago

beaniebag commented 1 year ago

Duplicates

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 commented 1 year ago

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

hbjORbj commented 1 year ago

Duplicate of https://github.com/mui/material-ui/issues/23446

We suggest you to simply customise the component. More explanation: https://github.com/mui/material-ui/issues/23446#issuecomment-723592194

beaniebag commented 1 year ago

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, }, }));