Drawer Content Here
- Sign Out

###### Button Group

Basic Button Group

Use `variant={'outlined' | 'contained' | 'text'}` prop with `<ButtonGroup>` component for button groups.

    // ** MUI Imports
    import Button from '@mui/material/Button'
    import ButtonGroup from '@mui/material/ButtonGroup'

    const ButtonGroupBasic = () => {
      return (
        <div className='demo-space-y'>
          <div>
            <ButtonGroup variant='outlined'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
          <div>
            <ButtonGroup variant='tonal'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
          <div>
            <ButtonGroup variant='contained'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
          <div>
            <ButtonGroup variant='text'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
        </div>
      )
    }

    export default ButtonGroupBasic

Button Group Sizes

Use `size={'small' | 'medium' | 'large'}` prop with `<ButtonGroup>` component for different sizes of button groups.

    // ** MUI Imports
    import Button from '@mui/material/Button'
    import ButtonGroup from '@mui/material/ButtonGroup'

    const ButtonGroupSizes = () => {
      return (
        <div className='demo-space-y'>
          <div>
            <ButtonGroup size='small'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
          <div>
            <ButtonGroup size='medium'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
          <div>
            <ButtonGroup size='large'>
              <Button>One</Button>
              <Button>Two</Button>
              <Button>Three</Button>
            </ButtonGroup>
          </div>
        </div>
      )
    }

    export default ButtonGroupSizes

Vertical Button Group

Use `orientation='vertical'` prop with `<ButtonGroup>` component for vertical button groups.

    // ** MUI Imports
    import Button from '@mui/material/Button'
    import ButtonGroup from '@mui/material/ButtonGroup'

    const ButtonGroupVertical = () => {
      return (
        <div className='demo-space-x'>
          <ButtonGroup variant='outlined' orientation='vertical'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>
          <ButtonGroup variant='tonal' orientation='vertical'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>
          <ButtonGroup variant='contained' orientation='vertical'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>
          <ButtonGroup variant='text' orientation='vertical'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>
        </div>
      )
    }

    export default ButtonGroupVertical

Split Button

`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.

    // ** React Imports
    import { useRef, useState, Fragment } from 'react'

    // ** MUI Imports
    import Grow from '@mui/material/Grow'
    import Paper from '@mui/material/Paper'
    import Button from '@mui/material/Button'
    import Popper from '@mui/material/Popper'
    import MenuItem from '@mui/material/MenuItem'
    import MenuList from '@mui/material/MenuList'
    import ButtonGroup from '@mui/material/ButtonGroup'
    import ClickAwayListener from '@mui/material/ClickAwayListener'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge']

    const ButtonGroupSplit = () => {
      // ** States
      const [open, setOpen] = useState(false)
      const [selectedIndex, setSelectedIndex] = useState(1)

      // ** Ref
      const anchorRef = useRef(null)

      const handleClick = () => {
        console.info(You clicked '{options[selectedIndex]}')
      }

      const handleMenuItemClick = (event, index) => {
        setSelectedIndex(index)
        setOpen(false)
      }

      const handleToggle = () => {
        setOpen(prevOpen => !prevOpen)
      }

      const handleClose = () => {
        setOpen(false)
      }

      return (
        <Fragment>
          <ButtonGroup variant='contained' ref={anchorRef} aria-label='split button'>
            <Button onClick={handleClick}>{options[selectedIndex]}</Button>
            <Button
              sx={{ px: '0' }}
              aria-haspopup='menu'
              onClick={handleToggle}
              aria-label='select merge strategy'
              aria-expanded={open ? 'true' : undefined}
              aria-controls={open ? 'split-button-menu' : undefined}
            >
              <Icon icon='tabler:chevron-down' />
            </Button>
          </ButtonGroup>
          <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
            {({ TransitionProps, placement }) => (
              <Grow
                {...TransitionProps}
                style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
              >
                <Paper>
                  <ClickAwayListener onClickAway={handleClose}>
                    <MenuList id='split-button-menu'>
                      {options.map((option, index) => (
                        <MenuItem
                          key={option}
                          disabled={index === 2}
                          selected={index === selectedIndex}
                          onClick={event => handleMenuItemClick(event, index)}
                        >
                          {option}
                        </MenuItem>
                      ))}
                    </MenuList>
                  </ClickAwayListener>
                </Paper>
              </Grow>
            )}
          </Popper>
        </Fragment>
      )
    }

    export default ButtonGroupSplit

Button Group Colors

Use `color` prop for different colored button-groups.

    // ** MUI Imports
    import Button from '@mui/material/Button'
    import ButtonGroup from '@mui/material/ButtonGroup'

    const ButtonGroupColor = () => {
      return (
        <div className='demo-space-x'>
          <ButtonGroup variant='outlined' color='secondary'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>

          <ButtonGroup variant='outlined' color='success'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>

          <ButtonGroup variant='outlined' color='error'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>

          <ButtonGroup variant='outlined' color='warning'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>

          <ButtonGroup variant='outlined' color='info'>
            <Button>One</Button>
            <Button>Two</Button>
            <Button>Three</Button>
          </ButtonGroup>
        </div>
      )
    }

    export default ButtonGroupColor

###### Toggle Button

Simple Toggle Button

Manage `value` prop with `<ToggleButtonGroup>` component with the help of a state and use `exclusive` prop with `<ToggleButtonGroup>` component.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import ToggleButton from '@mui/material/ToggleButton'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const ButtonToggleSimple = () => {
      // ** State
      const [alignment, setAlignment] = useState('left')

      const handleAlignment = (event, newAlignment) => {
        setAlignment(newAlignment)
      }

      return (
        <ToggleButtonGroup exclusive value={alignment} onChange={handleAlignment} aria-label='text alignment'>
          <ToggleButton value='left' aria-label='left aligned'>
            <Icon icon='tabler:align-left' />
          </ToggleButton>
          <ToggleButton value='center' aria-label='center aligned'>
            <Icon icon='tabler:align-center' />
          </ToggleButton>
          <ToggleButton value='right' aria-label='right aligned'>
            <Icon icon='tabler:align-right' />
          </ToggleButton>
          <ToggleButton value='justify' aria-label='justified' disabled>
            <Icon icon='tabler:align-justified' />
          </ToggleButton>
        </ToggleButtonGroup>
      )
    }

    export default ButtonToggleSimple

Multiple Toggle Button

Manage `value` prop with the help of a state with array.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import ToggleButton from '@mui/material/ToggleButton'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const ButtonToggleMultiple = () => {
      // ** State
      const [formats, setFormats] = useState(() => ['bold', 'italic'])

      const handleFormat = (event, newFormats) => {
        setFormats(newFormats)
      }

      return (
        <ToggleButtonGroup value={formats} onChange={handleFormat} aria-label='text alignment'>
          <ToggleButton value='bold' aria-label='bold'>
            <Icon icon='tabler:bold' />
          </ToggleButton>
          <ToggleButton value='italic' aria-label='italic'>
            <Icon icon='tabler:italic' />
          </ToggleButton>
          <ToggleButton value='underlined' aria-label='underlined'>
            <Icon icon='tabler:underline' />
          </ToggleButton>
          <ToggleButton value='color' aria-label='color' disabled>
            <Icon icon='tabler:color-swatch' />
          </ToggleButton>
        </ToggleButtonGroup>
      )
    }

    export default ButtonToggleMultiple

Toggle Button Sizes

Use `size={'size' | 'large'}` prop for different sizes.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import ToggleButton from '@mui/material/ToggleButton'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const ButtonToggleSizes = () => {
      // ** State
      const [alignment, setAlignment] = useState('left')

      const handleAlignment = (event, newAlignment) => {
        setAlignment(newAlignment)
      }

      return (
        <div className='demo-space-y'>
          <div>
            <ToggleButtonGroup
              exclusive
              size='small'
              value={alignment}
              onChange={handleAlignment}
              aria-label='text alignment'
            >
              <ToggleButton value='left' aria-label='left aligned'>
                <Icon icon='tabler:align-left' />
              </ToggleButton>
              <ToggleButton value='center' aria-label='center aligned'>
                <Icon icon='tabler:align-center' />
              </ToggleButton>
              <ToggleButton value='right' aria-label='right aligned'>
                <Icon icon='tabler:align-right' />
              </ToggleButton>
              <ToggleButton value='justify' aria-label='justified' disabled>
                <Icon icon='tabler:align-justified' />
              </ToggleButton>
            </ToggleButtonGroup>
          </div>
          <div>
            <ToggleButtonGroup exclusive value={alignment} onChange={handleAlignment} aria-label='text alignment'>
              <ToggleButton value='left' aria-label='left aligned'>
                <Icon icon='tabler:align-left' />
              </ToggleButton>
              <ToggleButton value='center' aria-label='center aligned'>
                <Icon icon='tabler:align-center' />
              </ToggleButton>
              <ToggleButton value='right' aria-label='right aligned'>
                <Icon icon='tabler:align-right' />
              </ToggleButton>
              <ToggleButton value='justify' aria-label='justified' disabled>
                <Icon icon='tabler:align-justified' />
              </ToggleButton>
            </ToggleButtonGroup>
          </div>
          <div>
            <ToggleButtonGroup
              exclusive
              size='large'
              value={alignment}
              onChange={handleAlignment}
              aria-label='text alignment'
            >
              <ToggleButton value='left' aria-label='left aligned'>
                <Icon icon='tabler:align-left' />
              </ToggleButton>
              <ToggleButton value='center' aria-label='center aligned'>
                <Icon icon='tabler:align-center' />
              </ToggleButton>
              <ToggleButton value='right' aria-label='right aligned'>
                <Icon icon='tabler:align-right' />
              </ToggleButton>
              <ToggleButton value='justify' aria-label='justified' disabled>
                <Icon icon='tabler:align-justified' />
              </ToggleButton>
            </ToggleButtonGroup>
          </div>
        </div>
      )
    }

    export default ButtonToggleSizes

Vertical Toggle Button

Use `orientation='vertical'` prop for vertical toggle button.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import ToggleButton from '@mui/material/ToggleButton'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const ButtonToggleVertical = () => {
      // ** State
      const [view, setView] = useState('left')

      const handleView = (event, newView) => {
        setView(newView)
      }

      return (
        <ToggleButtonGroup exclusive value={view} orientation='vertical' onChange={handleView} aria-label='text alignment'>
          <ToggleButton value='left' aria-label='left aligned'>
            <Icon icon='tabler:list' />
          </ToggleButton>
          <ToggleButton value='center' aria-label='center aligned'>
            <Icon icon='tabler:list-numbers' />
          </ToggleButton>
          <ToggleButton value='right' aria-label='right aligned'>
            <Icon icon='tabler:list-check' />
          </ToggleButton>
        </ToggleButtonGroup>
      )
    }

    export default ButtonToggleVertical

Enforce Value Set

Use `if` statement in handle function in `onChange` prop.

Exclusive Selection

Multiple Selection

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Grid from '@mui/material/Grid'
    import Typography from '@mui/material/Typography'
    import ToggleButton from '@mui/material/ToggleButton'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    const ButtonToggleEnforceValue = () => {
      // ** States
      const [formats, setFormats] = useState(() => ['phone'])
      const [alignment, setAlignment] = useState('left')

      const handleAlignment = (event, newAlignment) => {
        if (newAlignment !== null) {
          setAlignment(newAlignment)
        }
      }

      const handleFormat = (event, newFormats) => {
        if (newFormats.length) {
          setFormats(newFormats)
        }
      }

      return (
        <Grid container spacing={6}>
          <Grid item xs={12} sm={6}>
            <Typography sx={{ fontWeight: 500, mb: 2 }}>Exclusive Selection</Typography>
            <ToggleButtonGroup exclusive value={alignment} onChange={handleAlignment} aria-label='text alignment'>
              <ToggleButton value='left' aria-label='left aligned'>
                <Icon icon='tabler:align-left' />
              </ToggleButton>
              <ToggleButton value='center' aria-label='center aligned'>
                <Icon icon='tabler:align-center' />
              </ToggleButton>
              <ToggleButton value='right' aria-label='right aligned'>
                <Icon icon='tabler:align-right' />
              </ToggleButton>
              <ToggleButton value='justify' aria-label='justified' disabled>
                <Icon icon='tabler:align-justified' />
              </ToggleButton>
            </ToggleButtonGroup>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Typography sx={{ fontWeight: 500, mb: 2 }}>Multiple Selection</Typography>
            <ToggleButtonGroup value={formats} onChange={handleFormat} aria-label='device'>
              <ToggleButton value='laptop' aria-label='laptop'>
                <Icon icon='tabler:device-laptop' />
              </ToggleButton>
              <ToggleButton value='desktop' aria-label='desktop'>
                <Icon icon='tabler:device-desktop' />
              </ToggleButton>
              <ToggleButton value='phone' aria-label='phone'>
                <Icon icon='tabler:device-mobile' />
              </ToggleButton>
            </ToggleButtonGroup>
          </Grid>
        </Grid>
      )
    }

    export default ButtonToggleEnforceValue

Customized Toggle Button

Use `styled` hook to customize your toggle button.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import Box from '@mui/material/Box'
    import Divider from '@mui/material/Divider'
    import { styled } from '@mui/material/styles'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
    import MuiToggleButton from '@mui/material/ToggleButton'

    // ** Icon Imports
    import Icon from 'src/@core/components/icon'

    // Styled ToggleButton component
    const ToggleButton = styled(MuiToggleButton)(({ theme }) => ({
      margin: theme.spacing(1),
      border: 'none !important',
      padding: theme.spacing(2),
      '&:not(:first-of-type)': {
        borderRadius: {theme.shape.borderRadius}px !important
      },
      '&:first-of-type': {
        borderRadius: {theme.shape.borderRadius}px !important
      }
    }))

    const ButtonToggleCustomized = () => {
      // ** States
      const [alignment, setAlignment] = useState('left')
      const [formats, setFormats] = useState(() => ['italic'])

      const handleAlignment = (event, newAlignment) => {
        setAlignment(newAlignment)
      }

      const handleFormat = (event, newFormats) => {
        setFormats(newFormats)
      }

      return (
        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
          <ToggleButtonGroup exclusive value={alignment} onChange={handleAlignment} aria-label='text alignment'>
            <ToggleButton value='left' aria-label='left aligned'>
              <Icon icon='tabler:align-left' />
            </ToggleButton>
            <ToggleButton value='center' aria-label='center aligned'>
              <Icon icon='tabler:align-center' />
            </ToggleButton>
            <ToggleButton value='right' aria-label='right aligned'>
              <Icon icon='tabler:align-right' />
            </ToggleButton>
            <ToggleButton value='justify' aria-label='justified' disabled>
              <Icon icon='tabler:align-justified' />
            </ToggleButton>
          </ToggleButtonGroup>
          <Divider flexItem orientation='vertical' sx={{ m: 1 }} />
          <ToggleButtonGroup value={formats} onChange={handleFormat} aria-label='text alignment'>
            <ToggleButton value='bold' aria-label='bold'>
              <Icon icon='tabler:bold' />
            </ToggleButton>
            <ToggleButton value='italic' aria-label='italic'>
              <Icon icon='tabler:italic' />
            </ToggleButton>
            <ToggleButton value='underlined' aria-label='underlined'>
              <Icon icon='tabler:underline' />
            </ToggleButton>
            <ToggleButton value='color' aria-label='color' disabled>
              <Icon icon='tabler:color-swatch' />
            </ToggleButton>
          </ToggleButtonGroup>
        </Box>
      )
    }

    export default ButtonToggleCustomized

Toggle Button Colors

Use `color` prop for different colored toggle-buttons.

    // ** React Imports
    import { useState } from 'react'

    // ** MUI Imports
    import ToggleButton from '@mui/material/ToggleButton'
    import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'

    const ButtonToggleColors = () => {
      // ** State
      const [alignment, setAlignment] = useState('web')

      const handleAlignment = (event, newAlignment) => {
        setAlignment(newAlignment)
      }

      return (
        <div className='demo-space-x'>
          <ToggleButtonGroup exclusive color='primary' value={alignment} onChange={handleAlignment}>
            <ToggleButton value='web'>Web</ToggleButton>
            <ToggleButton value='android'>Android</ToggleButton>
            <ToggleButton value='ios'>iOS</ToggleButton>
          </ToggleButtonGroup>

          <ToggleButtonGroup exclusive color='secondary' value={alignment} onChange={handleAlignment}>
            <ToggleButton value='web'>Web</ToggleButton>
            <ToggleButton value='android'>Android</ToggleButton>
            <ToggleButton value='ios'>iOS</ToggleButton>
          </ToggleButtonGroup>

          <ToggleButtonGroup exclusive color='success' value={alignment} onChange={handleAlignment}>
            <ToggleButton value='web'>Web</ToggleButton>
            <ToggleButton value='android'>Android</ToggleButton>
            <ToggleButton value='ios'>iOS</ToggleButton>
          </ToggleButtonGroup>

          <ToggleButtonGroup exclusive color='error' value={alignment} onChange={handleAlignment}>
            <ToggleButton value='web'>Web</ToggleButton>
            <ToggleButton value='android'>Android</ToggleButton>
            <ToggleButton value='ios'>iOS</ToggleButton>
          </ToggleButtonGroup>

          <ToggleButtonGroup exclusive color='warning' value={alignment} onChange={handleAlignment}>
            <ToggleButton value='web'>Web</ToggleButton>
            <ToggleButton value='android'>Android</ToggleButton>
            <ToggleButton value='ios'>iOS</ToggleButton>
          </ToggleButtonGroup>

          <ToggleButtonGroup exclusive color='info' value={alignment} onChange={handleAlignment}>
            <ToggleButton value='web'>Web</ToggleButton>
            <ToggleButton value='android'>Android</ToggleButton>
            <ToggleButton value='ios'>iOS</ToggleButton>
          </ToggleButtonGroup>
        </div>
      )
    }

    export default ButtonToggleColors