Buttons

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

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='flex gap-4'>
      <Button variant='contained'>Primary</Button>
      <Button variant='contained' color='secondary'>
        Secondary
      </Button>
      <Button variant='contained' disabled>
        Disabled
      </Button>
      <Button variant='contained' href='#' className='hover:text-[var(--mui-palette-primary-contrastText)]'>
        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='flex gap-4'>
      <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='flex gap-4'>
      <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

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'

const ButtonsWithIconAndLabel = () => {
  return (
    <div className='flex gap-4'>
      <Button variant='contained' endIcon={<i className='ri-send-plane-2-line' />}>
        Send
      </Button>
      <Button variant='contained' color='secondary' startIcon={<i className='ri-delete-bin-7-line' />}>
        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'

const ButtonsIcons = () => {
  return (
    <div className='flex gap-4'>
      <IconButton aria-label='capture screenshot'>
        <i className='ri-camera-lens-fill' />
      </IconButton>
      <IconButton aria-label='capture screenshot' color='primary'>
        <i className='ri-camera-lens-fill' />
      </IconButton>
      <IconButton aria-label='capture screenshot' color='secondary'>
        <i className='ri-camera-lens-fill' />
      </IconButton>
      <IconButton aria-label='capture screenshot' disabled>
        <i className='ri-camera-lens-fill' />
      </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.

---

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

const ButtonsSizes = () => {
  return (
    <div className='flex gap-4 flex-col'>
      <div className='flex gap-4 items-center'>
        <Button variant='text' size='small'>
          Small
        </Button>
        <Button variant='text' size='medium'>
          Medium
        </Button>
        <Button variant='text' size='large'>
          Large
        </Button>
      </div>
      <div className='flex gap-4 items-center'>
        <Button variant='outlined' size='small'>
          Small
        </Button>
        <Button variant='outlined' size='medium'>
          Medium
        </Button>
        <Button variant='outlined' size='large'>
          Large
        </Button>
      </div>
      <div className='flex gap-4 items-center'>
        <Button variant='contained' size='small'>
          Small
        </Button>
        <Button variant='contained' size='medium'>
          Medium
        </Button>
        <Button variant='contained' size='large'>
          Large
        </Button>
      </div>
      <div className='flex gap-4 items-center'>
        <IconButton aria-label='capture screenshot' color='primary' size='small'>
          <i className='ri-camera-lens-fill text-xl' />
        </IconButton>
        <IconButton aria-label='capture screenshot' color='primary'>
          <i className='ri-camera-lens-fill' />
        </IconButton>
        <IconButton aria-label='capture screenshot' color='primary' size='large'>
          <i className='ri-camera-lens-fill text-[28px]' />
        </IconButton>
      </div>
    </div>
  )
}

export default ButtonsSizes

Button Colors

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

---

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

const ButtonsColors = () => {
  return (
    <div className='flex gap-4 flex-col'>
      <div className='flex gap-4'>
        <Button color='success'>Success</Button>
        <Button color='error'>Error</Button>
        <Button color='warning'>Warning</Button>
        <Button color='info'>Info</Button>
      </div>
      <div className='flex gap-4'>
        <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='flex gap-4'>
        <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>
  )
}

export default ButtonsColors

Customized Buttons

---

TSX

// MUI Imports
import Button from '@mui/material/Button'
import { purple } from '@mui/material/colors'
import { styled } from '@mui/material/styles'
import type { ButtonProps } from '@mui/material/Button'

// Styled component for a custom button
const CustomButton = styled(Button)<ButtonProps>(({ theme }) => ({
  color: theme.palette.getContrastText(purple[500]),
  backgroundColor: purple[500],
  '&:hover, &:active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
    backgroundColor: purple[700]
  }
}))

// Styled component for a Bootstrap button
const BootstrapButton = styled(Button)<ButtonProps>({
  boxShadow: 'none',
  textTransform: 'none',
  fontSize: 16,
  padding: '6px 12px',
  border: '1px solid',
  lineHeight: 1.5,
  backgroundColor: '#0D6EFD !important',
  borderColor: '#0D6EFD !important',
  fontFamily: [
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    'sans-serif',
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"'
  ].join(','),
  '&:hover': {
    backgroundColor: '#0B5ED7 !important',
    borderColor: '#0A58CA !important',
    boxShadow: 'none'
  },
  '&:active': {
    boxShadow: 'none',
    backgroundColor: '#0A58CA !important',
    borderColor: '#0A53BE !important'
  },
  '&:focus, &.Mui-focusVisible': {
    backgroundColor: '#0B5ED7 !important',
    borderColor: '#0A58CA !important',
    boxShadow: '0 0 0 0.25rem rgba(49,132,253,0.5) !important'
  }
})

const ButtonsCustomized = () => {
  return (
    <div className='flex gap-4'>
      <CustomButton variant='contained'>Custom Color</CustomButton>
      <BootstrapButton variant='contained' disableRipple>
        Bootstrap
      </BootstrapButton>
    </div>
  )
}

export default ButtonsCustomized

JS

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

// Styled component for a custom button
const CustomButton = styled(Button)(({ theme }) => ({
  color: theme.palette.getContrastText(purple[500]),
  backgroundColor: purple[500],
  '&:hover, &:active, &.Mui-focusVisible:not(:has(span.MuiTouchRipple-root))': {
    backgroundColor: purple[700]
  }
}))

// Styled component for a Bootstrap button
const BootstrapButton = styled(Button)({
  boxShadow: 'none',
  textTransform: 'none',
  fontSize: 16,
  padding: '6px 12px',
  border: '1px solid',
  lineHeight: 1.5,
  backgroundColor: '#0D6EFD !important',
  borderColor: '#0D6EFD !important',
  fontFamily: [
    '-apple-system',
    'BlinkMacSystemFont',
    '"Segoe UI"',
    'Roboto',
    '"Helvetica Neue"',
    'Arial',
    'sans-serif',
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"'
  ].join(','),
  '&:hover': {
    backgroundColor: '#0B5ED7 !important',
    borderColor: '#0A58CA !important',
    boxShadow: 'none'
  },
  '&:active': {
    boxShadow: 'none',
    backgroundColor: '#0A58CA !important',
    borderColor: '#0A53BE !important'
  },
  '&:focus, &.Mui-focusVisible': {
    backgroundColor: '#0B5ED7 !important',
    borderColor: '#0A58CA !important',
    boxShadow: '0 0 0 0.25rem rgba(49,132,253,0.5) !important'
  }
})

const ButtonsCustomized = () => {
  return (
    <div className='flex gap-4'>
      <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 Fab from '@mui/material/Fab'
import Typography from '@mui/material/Typography'

const ButtonsFab = () => {
  return (
    <div className='flex gap-4 flex-col'>
      <Typography className='font-medium' color='text.primary'>
        Circular Variant
      </Typography>
      <div className='flex gap-4 mbe-6'>
        <Fab aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='primary' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='secondary' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='success' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='error' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='warning' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='info' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab disabled aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
      </div>
      <Typography className='font-medium' color='text.primary'>
        Extended Variant
      </Typography>
      <div className='flex gap-4'>
        <Fab variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='primary' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='secondary' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='success' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='error' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='warning' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='info' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab disabled variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
      </div>
    </div>
  )
}

export default ButtonsFab

Floating Action Button Sizes

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

---

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

const ButtonsFab = () => {
  return (
    <div className='flex gap-4 flex-col'>
      <Typography className='font-medium' color='text.primary'>
        Circular Variant
      </Typography>
      <div className='flex gap-4 mbe-6'>
        <Fab aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='primary' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='secondary' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='success' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='error' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='warning' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab color='info' aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
        <Fab disabled aria-label='edit'>
          <i className='ri-pencil-line' />
        </Fab>
      </div>
      <Typography className='font-medium' color='text.primary'>
        Extended Variant
      </Typography>
      <div className='flex gap-4'>
        <Fab variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='primary' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='secondary' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='success' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='error' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='warning' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab color='info' variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
        <Fab disabled variant='extended'>
          <i className='ri-add-line mie-1' />
          Add
        </Fab>
      </div>
    </div>
  )
}

export default ButtonsFab