Drawer Content Here
- Sign Out
Contained

Use `variant='contained'` prop with `<Button>` component for contained buttons.

Link

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

    const ButtonsContained = () => {
      return (
        <div className='demo-space-x'>
          <Button variant='contained'>Primary</Button>
          <Button variant='contained' color='secondary'>
            Secondary
          </Button>
          <Button variant='contained' disabled>
            Disabled
          </Button>
          <Button variant='contained' href='#'>
            Link
          </Button>
        </div>
      )
    }

    export default ButtonsContained

Text

Use `variant='text'` prop with `<Button>` component for buttons with text only.

Link

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

    const ButtonsText = () => {
      return (
        <div className='demo-space-x'>
          <Button variant='text'>Primary</Button>
          <Button variant='text' color='secondary'>
            Secondary
          </Button>
          <Button variant='text' disabled>
            Disabled
          </Button>
          <Button variant='text' href='#'>
            Link
          </Button>
        </div>
      )
    }

    export default ButtonsText

Outlined

Use `variant='outlined'` prop with `<Button>` component for outlined buttons.

Link

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

    const ButtonsOutlined = () => {
      return (
        <div className='demo-space-x'>
          <Button variant='outlined'>Primary</Button>
          <Button variant='outlined' color='secondary'>
            Secondary
          </Button>
          <Button variant='outlined' disabled>
            Disabled
          </Button>
          <Button variant='outlined' href='#'>
            Link
          </Button>
        </div>
      )
    }

    export default ButtonsOutlined

Tonal

Use `variant='tonal'` prop with `<Button>` component for tonal buttons.

Link

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

    const ButtonsTonal = () => {
      return (
        <div className='demo-space-x'>
          <Button variant='tonal'>Primary</Button>
          <Button variant='tonal' color='secondary'>
            Secondary
          </Button>
          <Button variant='tonal' disabled>
            Disabled
          </Button>
          <Button variant='tonal' href='#'>
            Link
          </Button>
        </div>
      )
    }

    export default ButtonsTonal

Buttons With Icon and Label

Use `startIcon | endIcon` prop with `<Button>` component to add an icon inside a button.

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

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

    const ButtonsWithIconAndLabel = () => {
      return (
        <div className='demo-space-x'>
          <Button variant='contained' endIcon={<Icon icon='tabler:send' />}>
            Send
          </Button>
          <Button variant='contained' color='secondary' startIcon={<Icon icon='tabler:trash' />}>
            Delete
          </Button>
        </div>
      )
    }

    export default ButtonsWithIconAndLabel

Icon Buttons

Use an icon component inside `<IconButton>` component. For different colors, use `color` prop with `<IconButton>` component.

    // ** MUI Imports
    import IconButton from '@mui/material/IconButton'

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

    const ButtonsIcons = () => {
      return (
        <div className='demo-space-x'>
          <IconButton aria-label='capture screenshot'>
            <Icon icon='tabler:aperture' />
          </IconButton>
          <IconButton aria-label='capture screenshot' color='primary'>
            <Icon icon='tabler:aperture' />
          </IconButton>
          <IconButton aria-label='capture screenshot' color='secondary'>
            <Icon icon='tabler:aperture' />
          </IconButton>
          <IconButton aria-label='capture screenshot' disabled>
            <Icon icon='tabler:aperture' />
          </IconButton>
        </div>
      )
    }

    export default ButtonsIcons

Button Sizes

Use `size={'small' | 'medium' | 'large'}` prop with `<Button>` component for different sized buttons. To use icon buttons, you need to use `size={small | large}` prop with `<IconButton>` component or you can also use `fontSize` prop with the icons.

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

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

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

    const ButtonsSizes = () => {
      return (
        <Fragment>
          <div className='demo-space-x'>
            <Button variant='text' size='small'>
              Small
            </Button>
            <Button variant='text' size='medium'>
              Medium
            </Button>
            <Button variant='text' size='large'>
              Large
            </Button>
          </div>
          <div className='demo-space-x'>
            <Button variant='outlined' size='small'>
              Small
            </Button>
            <Button variant='outlined' size='medium'>
              Medium
            </Button>
            <Button variant='outlined' size='large'>
              Large
            </Button>
          </div>
          <div className='demo-space-x'>
            <Button variant='contained' size='small'>
              Small
            </Button>
            <Button variant='contained' size='medium'>
              Medium
            </Button>
            <Button variant='contained' size='large'>
              Large
            </Button>
          </div>
          <div className='demo-space-x'>
            <Button variant='tonal' size='small'>
              Small
            </Button>
            <Button variant='tonal' size='medium'>
              Medium
            </Button>
            <Button variant='tonal' size='large'>
              Large
            </Button>
          </div>
          <div className='demo-space-x'>
            <IconButton aria-label='capture screenshot' color='secondary' size='small'>
              <Icon icon='tabler:aperture' fontSize='inherit' />
            </IconButton>
            <IconButton aria-label='capture screenshot' color='secondary'>
              <Icon icon='tabler:aperture' fontSize={20} />
            </IconButton>
            <IconButton aria-label='capture screenshot' color='secondary'>
              <Icon icon='tabler:aperture' />
            </IconButton>
            <IconButton aria-label='capture screenshot' color='secondary' size='large'>
              <Icon icon='tabler:aperture' fontSize={35} />
            </IconButton>
          </div>
        </Fragment>
      )
    }

    export default ButtonsSizes

Button Colors

Use `color` prop with `<Button>` component for different colored buttons.

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

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

    const ButtonsColors = () => {
      return (
        <Fragment>
          <div className='demo-space-x'>
            <Button color='success'>Success</Button>
            <Button color='error'>Error</Button>
            <Button color='warning'>Warning</Button>
            <Button color='info'>Info</Button>
          </div>
          <div className='demo-space-x'>
            <Button variant='outlined' color='success'>
              Success
            </Button>
            <Button variant='outlined' color='error'>
              Error
            </Button>
            <Button variant='outlined' color='warning'>
              Warning
            </Button>
            <Button variant='outlined' color='info'>
              Info
            </Button>
          </div>
          <div className='demo-space-x'>
            <Button variant='contained' color='success'>
              Success
            </Button>
            <Button variant='contained' color='error'>
              Error
            </Button>
            <Button variant='contained' color='warning'>
              Warning
            </Button>
            <Button variant='contained' color='info'>
              Info
            </Button>
          </div>
          <div className='demo-space-x'>
            <Button variant='tonal' color='success'>
              Success
            </Button>
            <Button variant='tonal' color='error'>
              Error
            </Button>
            <Button variant='tonal' color='warning'>
              Warning
            </Button>
            <Button variant='tonal' color='info'>
              Info
            </Button>
          </div>
        </Fragment>
      )
    }

    export default ButtonsColors

Customized Buttons

    // ** MUI Imports
    import { brown } from '@mui/material/colors'
    import { styled } from '@mui/material/styles'
    import Button from '@mui/material/Button'

    // Styled component for a custom button
    const CustomButton = styled(Button)(({ theme }) => ({
      backgroundColor: brown[500],
      color: theme.palette.getContrastText(brown[500]),
      '&:hover': {
        backgroundColor: brown[700]
      }
    }))

    // Styled component for a Bootstrap button
    const BootstrapButton = styled(Button)({
      fontSize: 16,
      lineHeight: 1.5,
      boxShadow: 'none',
      border: '1px solid',
      padding: '6px 12px',
      textTransform: 'none',
      borderColor: '#0063cc',
      backgroundColor: '#0063cc',
      fontFamily: [
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"'
      ].join(','),
      '&:hover': {
        boxShadow: 'none',
        borderColor: '#0062cc',
        backgroundColor: '#0069d9'
      },
      '&:active': {
        boxShadow: 'none',
        borderColor: '#005cbf',
        backgroundColor: '#0062cc',
        transform: 'none !important'
      },
      '&:focus': {
        boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)'
      }
    })

    const ButtonsCustomized = () => {
      return (
        <div className='demo-space-x'>
          <CustomButton variant='contained'>Custom Color</CustomButton>
          <BootstrapButton variant='contained' disableRipple>
            Bootstrap
          </BootstrapButton>
        </div>
      )
    }

    export default ButtonsCustomized

Floating Action Button

Use `color` prop with `<Fab>` component for different colored Floating Action Button and `variant='extended'` prop for extended (not round) Floating Action Button.

Circular Variant

Extended Variant

    // ** MUI Imports
    import Box from '@mui/material/Box'
    import Fab from '@mui/material/Fab'
    import Typography from '@mui/material/Typography'

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

    const ButtonsFab = () => {
      return (
        <>
          <Typography sx={{ fontWeight: 500 }}>Circular Variant</Typography>
          <Box sx={{ mb: 6 }} className='demo-space-x'>
            <Fab aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab color='primary' aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab color='secondary' aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab color='success' aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab color='error' aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab color='warning' aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab color='info' aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
            <Fab disabled aria-label='edit'>
              <Icon icon='tabler:pencil' />
            </Fab>
          </Box>
          <Typography sx={{ fontWeight: 500 }}>Extended Variant</Typography>
          <div className='demo-space-x'>
            <Fab variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab color='primary' variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab color='secondary' variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab color='success' variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab color='error' variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab color='warning' variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab color='info' variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
            <Fab disabled variant='extended' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:plus' />
              Add
            </Fab>
          </div>
        </>
      )
    }

    export default ButtonsFab

Floating Action Button Sizes

Use `size={'small' | 'medium' | 'large'}` prop for different sizes of Floating Action Buttons.

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

    // ** MUI Imports
    import Fab from '@mui/material/Fab'

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

    const ButtonsFabSizes = () => {
      return (
        <Fragment>
          <div className='demo-space-x'>
            <Fab color='primary' aria-label='add' size='small'>
              <Icon icon='tabler:plus' />
            </Fab>
            <Fab color='primary' aria-label='add' size='medium'>
              <Icon icon='tabler:plus' />
            </Fab>
            <Fab color='primary' aria-label='add' size='large'>
              <Icon icon='tabler:plus' />
            </Fab>
          </div>
          <div className='demo-space-x'>
            <Fab variant='extended' size='small' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:navigation' />
              Navigate
            </Fab>
            <Fab variant='extended' size='medium' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:navigation' />
              Navigate
            </Fab>
            <Fab variant='extended' size='large' sx={{ '& svg': { mr: 1 } }}>
              <Icon icon='tabler:navigation' />
              Navigate
            </Fab>
          </div>
        </Fragment>
      )
    }

    export default ButtonsFabSizes