Drawer Content Here
- Sign Out
Basic

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

This is an error alert — check it out!
This is an warning alert — check it out!
This is an info alert — check it out!
This is an success alert — check it out!

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

    const AlertsBasic = () => {
      return (
        <div className='demo-space-y'>
          <Alert severity='error'>This is an error alert — check it out!</Alert>
          <Alert severity='warning'>This is an warning alert — check it out!</Alert>
          <Alert severity='info'>This is an info alert — check it out!</Alert>
          <Alert severity='success'>This is an success alert — check it out!</Alert>
        </div>
      )
    }

    export default AlertsBasic

Outlined

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

This is an error alert — check it out!
This is an warning alert — check it out!
This is an info alert — check it out!
This is an success alert — check it out!

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

    const AlertsOutlined = () => {
      return (
        <div className='demo-space-y'>
          <Alert variant='outlined' severity='error'>
            This is an error alert — check it out!
          </Alert>
          <Alert variant='outlined' severity='warning'>
            This is an 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 an success alert — check it out!
          </Alert>
        </div>
      )
    }

    export default AlertsOutlined

Filled

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

This is an error alert — check it out!
This is an warning alert — check it out!
This is an info alert — check it out!
This is an success alert — check it out!

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

    const AlertsFilled = () => {
      return (
        <div className='demo-space-y'>
          <Alert variant='filled' severity='error'>
            This is an error alert — check it out!
          </Alert>
          <Alert variant='filled' severity='warning'>
            This is an 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 an 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.

This is a success alert — check it out!
This is a success alert — check it out!
This is a success alert — check it out!

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

    const AlertsBasic = () => {
      return (
        <div className='demo-space-y'>
          <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 AlertsBasic

Description

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

Error
This is an error alert — check it out!
Warning
This is an warning alert — check it out!
Info
This is an info alert — check it out!
Success
This is an success alert — check it out!

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

    const AlertsDescription = () => {
      return (
        <div className='demo-space-y'>
          <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 an 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 an 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.

Close me!
Close me!
Close me!
Close me!

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

    // ** MUI Imports
    import Box from '@mui/material/Box'
    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'

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

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

      return (
        <>
          <Box sx={{ mb: 6 }}>
            <Collapse in={open1}>
              <Alert
                action={
                  <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen1(false)}>
                    <Icon icon='tabler:x' />
                  </IconButton>
                }
              >
                Close me!
              </Alert>
            </Collapse>
            <Button disabled={open1} variant='outlined' sx={{ mt: 2 }} onClick={() => setOpen1(true)}>
              Open Collapse
            </Button>
          </Box>

          <Box sx={{ mb: 6 }}>
            <Fade in={open2} {...(open2 ? { timeout: 700 } : {})}>
              <Alert
                action={
                  <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen2(false)}>
                    <Icon icon='tabler:x' />
                  </IconButton>
                }
              >
                Close me!
              </Alert>
            </Fade>
            <Button disabled={open2} variant='outlined' sx={{ mt: 2 }} onClick={() => setOpen2(true)}>
              Open Fade
            </Button>
          </Box>

          <Box sx={{ mb: 6 }}>
            <Grow in={open3} {...(open3 ? { timeout: 700 } : {})}>
              <Alert
                action={
                  <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen3(false)}>
                    <Icon icon='tabler:x' />
                  </IconButton>
                }
              >
                Close me!
              </Alert>
            </Grow>
            <Button disabled={open3} variant='outlined' sx={{ mt: 2 }} onClick={() => setOpen3(true)}>
              Open Grow
            </Button>
          </Box>

          <div>
            <Slide in={open4} direction='left' {...(open4 ? { timeout: 500 } : {})}>
              <Alert
                action={
                  <IconButton size='small' color='inherit' aria-label='close' onClick={() => setOpen4(false)}>
                    <Icon icon='tabler:x' />
                  </IconButton>
                }
              >
                Close me!
              </Alert>
            </Slide>
            <Button disabled={open4} variant='outlined' sx={{ mt: 2 }} onClick={() => setOpen4(true)}>
              Open Slide
            </Button>
          </div>
        </>
      )
    }

    export default AlertsDismissible