Can anyone help me with a simple question? I am trying to figure out how to add a check icon inside the selected ToggleButton. Unfortunately, Stack Overflow won't allow me to post my question in detail. Any explanations would be greatly appreciated!
export default function TableBusiness() {
const [alignment, setAlignment] = React.useState('web');
const handleChange = (event, newAlignment) => {
setAlignment(newAlignment);
};
return (
<Box
sx={{
p: 2,
display: 'flex',
flexWrap: 'wrap',
'& > :not(style)': {
width: "100%",
height: 1000,
},
}}
>
<Box
display="flex"
justifyContent="space-around"
>
<ToggleButtonGroup
color="primary"
sx={{ borderRadius: '40px !important', backgroundColor: grey[50]}}
value={alignment}
exclusive
onChange={handleChange}
aria-label="Platform"
>
<ToggleButton sx={{borderBottomLeftRadius:20 , borderTopLeftRadius:20}} value="one">از ابتدای تاسیس</ToggleButton>
<ToggleButton borderRadius= '30px' value="two">یکسال گذشته</ToggleButton>
<ToggleButton value="three">یکماه گذشته</ToggleButton>
<ToggleButton sx={{borderBottomRightRadius:20 , borderTopRightRadius:20}} value="four">جدیدترین</ToggleButton>
</ToggleButtonGroup>
</Box>
);
}
I'm looking for help on how to display a check mark to the left of each selected ToggleButton. Thank you!