Skip to main content

Alerts

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

Basic

Use severity={'error' | 'warning' | 'info' | 'success'} prop with <Alert> component for different colored alerts.

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

const AlertsBasic = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Alert severity='error'>This is an error alert — check it out!</Alert>
      <Alert severity='warning'>This is a warning alert — check it out!</Alert>
      <Alert severity='info'>This is an info alert — check it out!</Alert>
      <Alert severity='success'>This is a success alert — check it out!</Alert>
    </div>
  )
}

export default AlertsBasic
Outlined

Use variant='outlined' prop with <Alert> component for outlined alerts.

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

const AlertsOutlined = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Alert variant='outlined' severity='error'>
        This is an error alert — check it out!
      </Alert>
      <Alert variant='outlined' severity='warning'>
        This is a warning alert — check it out!
      </Alert>
      <Alert variant='outlined' severity='info'>
        This is an info alert — check it out!
      </Alert>
      <Alert variant='outlined' severity='success'>
        This is a success alert — check it out!
      </Alert>
    </div>
  )
}

export default AlertsOutlined
Filled

Use variant='filled' prop with <Alert> component for filled alerts.

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

const AlertsFilled = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Alert variant='filled' severity='error'>
        This is an error alert — check it out!
      </Alert>
      <Alert variant='filled' severity='warning'>
        This is a warning alert — check it out!
      </Alert>
      <Alert variant='filled' severity='info'>
        This is an info alert — check it out!
      </Alert>
      <Alert variant='filled' severity='success'>
        This is a success alert — check it out!
      </Alert>
    </div>
  )
}

export default AlertsFilled
Action

To add a button, you need to use action prop with <Alert> component and pass a button inside this prop. To add a close button, you need to use onClose prop with <Alert> component.

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

const AlertsActions = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Alert
        onClose={e => {
          e.preventDefault()
        }}
      >
        This is a success alert — check it out!
      </Alert>
      <Alert
        action={
          <Button color='inherit' size='small'>
            Undo
          </Button>
        }
        variant='outlined'
      >
        This is a success alert — check it out!
      </Alert>
      <Alert
        action={
          <Button color='inherit' size='small'>
            Undo
          </Button>
        }
        variant='filled'
      >
        This is a success alert — check it out!
      </Alert>
    </div>
  )
}

export default AlertsActions
Description

You can use the AlertTitle component to display a formatted title above the content.

// MUI Imports
import Alert from '@mui/material/Alert'
import AlertTitle from '@mui/material/AlertTitle'

const AlertsDescription = () => {
  return (
    <div className='flex flex-col gap-4'>
      <Alert severity='error'>
        <AlertTitle>Error</AlertTitle>
        This is an error alert — <strong>check it out!</strong>
      </Alert>
      <Alert severity='warning'>
        <AlertTitle>Warning</AlertTitle>
        This is a warning alert — <strong>check it out!</strong>
      </Alert>
      <Alert severity='info'>
        <AlertTitle>Info</AlertTitle>
        This is an info alert — <strong>check it out!</strong>
      </Alert>
      <Alert severity='success'>
        <AlertTitle>Success</AlertTitle>
        This is a success alert — <strong>check it out!</strong>
      </Alert>
    </div>
  )
}

export default AlertsDescription
Dismissible

You need to use one of the transition components (viz. Collapse, Fade, Grow and Slide) to make a dismissible alert.

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

// MUI Imports
import Fade from '@mui/material/Fade'
import Grow from '@mui/material/Grow'
import Alert from '@mui/material/Alert'
import Slide from '@mui/material/Slide'
import Button from '@mui/material/Button'
import Collapse from '@mui/material/Collapse'
import IconButton from '@mui/material/IconButton'

const AlertsDismissible = () => {
  // States
  const [open1, setOpen1] = useState<boolean>(true)
  const [open2, setOpen2] = useState<boolean>(true)
  const [open3, setOpen3] = useState<boolean>(true)
  const [open4, setOpen4] = useState<boolean>(true)

  return (
    <>
      <div className='mbe-6'>
        <Collapse in={open1}>
          <Alert
            action={
              <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen1(false)}>
                <i className='ri-close-line text-[22px]' />
              </IconButton>
            }
          >
            Close me!
          </Alert>
        </Collapse>
        <Button disabled={open1} variant='outlined' className='mbs-2' onClick={() => setOpen1(true)}>
          Open Collapse
        </Button>
      </div>

      <div className='mbe-6'>
        <Fade in={open2} {...(open2 ? { timeout: 700 } : {})}>
          <Alert
            action={
              <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen2(false)}>
                <i className='ri-close-line text-[22px]' />
              </IconButton>
            }
          >
            Close me!
          </Alert>
        </Fade>
        <Button disabled={open2} variant='outlined' className='mbs-2' onClick={() => setOpen2(true)}>
          Open Fade
        </Button>
      </div>

      <div className='mbe-6'>
        <Grow in={open3} {...(open3 ? { timeout: 700 } : {})}>
          <Alert
            action={
              <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen3(false)}>
                <i className='ri-close-line text-[22px]' />
              </IconButton>
            }
          >
            Close me!
          </Alert>
        </Grow>
        <Button disabled={open3} variant='outlined' className='mbs-2' onClick={() => setOpen3(true)}>
          Open Grow
        </Button>
      </div>

      <>
        <Slide in={open4} direction='left' {...(open4 ? { timeout: 500 } : {})}>
          <Alert
            action={
              <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen4(false)}>
                <i className='ri-close-line text-[22px]' />
              </IconButton>
            }
          >
            Close me!
          </Alert>
        </Slide>
        <Button disabled={open4} variant='outlined' className='mbs-2' onClick={() => setOpen4(true)}>
          Open Slide
        </Button>
      </>
    </>
  )
}

export default AlertsDismissible