// ** MUI Imports import Grid from '@mui/material/Grid' import Typography from '@mui/material/Typography' // ** Custom Components Imports import CardSnippet from 'src/@core/components/card-snippet' // ** Demo Components Imports import ButtonGroupBasic from 'src/views/components/button-group/ButtonGroupBasic' import ButtonGroupSizes from 'src/views/components/button-group/ButtonGroupSizes' import ButtonGroupSplit from 'src/views/components/button-group/ButtonGroupSplit' import ButtonGroupColors from 'src/views/components/button-group/ButtonGroupColors' import ButtonToggleSizes from 'src/views/components/button-group/ButtonToggleSizes' import ButtonToggleSimple from 'src/views/components/button-group/ButtonToggleSimple' import ButtonToggleColors from 'src/views/components/button-group/ButtonToggleColors' import ButtonGroupVertical from 'src/views/components/button-group/ButtonGroupVertical' import ButtonToggleMultiple from 'src/views/components/button-group/ButtonToggleMultiple' import ButtonToggleVertical from 'src/views/components/button-group/ButtonToggleVertical' import ButtonToggleCustomized from 'src/views/components/button-group/ButtonToggleCustomized' import ButtonToggleEnforceValue from 'src/views/components/button-group/ButtonToggleEnforceValue' // ** Source code imports import * as source from 'src/views/components/button-group/ButtonGroupSourceCode' const ButtonGroup = () => { return ( Button Group Use variant={`{'outlined' | 'contained' | 'text'}`} prop with <ButtonGroup>{' '} component for button groups. Use size={`{'small' | 'medium' | 'large'}`} prop with <ButtonGroup>{' '} component for different sizes of button groups. Use orientation='vertical' prop with <ButtonGroup> component for vertical button groups. ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action. Use color prop for different colored button-groups. Toggle Button Manage value prop with <ToggleButtonGroup> component with the help of a state and use exclusive prop with <ToggleButtonGroup> component. Manage value prop with the help of a state with array. Use size={`{'size' | 'large'}`} prop for different sizes. Use orientation='vertical' prop for vertical toggle button. Use if statement in handle function in onChange prop. Use styled hook to customize your toggle button. Use color prop for different colored toggle-buttons. ) } export default ButtonGroup