Skip to main content

React Toastify

react-toastify is a third-party library. Please refer to its official documentation for more details.

Blank

The most basic variant does not have an icon.

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsBlank = () => {
  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-checkbox-blank-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Blank
      </Typography>
      <Typography className='mbe-3'>The most basic variant does not have an icon.</Typography>
      <Button
        className='mbe-8'
        variant='contained'
        onClick={() =>
          toast('Blank Toast', {
            hideProgressBar: false
          })
        }
      >
        Blank
      </Button>
    </div>
  )
}

export default ToastsBlank
Multi Line

The most basic variant with longer texts

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsMultiLine = () => {
  const handleClick = () => {
    return toast(
      "This toast is super big. I don't think anyone could eat it in one bite. It's larger than you expected. You eat it but it does not seem to get smaller."
    )
  }

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-file-text-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Multi Line
      </Typography>
      <Typography className='mbe-3'>The most basic variant with longer texts</Typography>
      <Button className='mbe-8' variant='contained' onClick={handleClick}>
        Multi Line
      </Button>
    </div>
  )
}

export default ToastsMultiLine
Success

Indicate that an action was completed successfully.

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsSuccess = () => {
  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-checkbox-circle-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Success
      </Typography>
      <Typography className='mbe-3'>Indicate that an action was completed successfully.</Typography>
      <Button
        className='mbe-8'
        color='success'
        variant='contained'
        onClick={() => toast.success('Successfully toasted!')}
      >
        Success
      </Button>
    </div>
  )
}

export default ToastsSuccess
Error

Indicate that an error occurred.

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastError = () => {
  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-close-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Error
      </Typography>
      <Typography className='mbe-3'>Indicate that an error occurred.</Typography>
      <Button className='mbe-8' color='error' variant='contained' onClick={() => toast.error("This didn't work.")}>
        Error
      </Button>
    </div>
  )
}

export default ToastError
Promise

Update automatically when promise resolves / fails.

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsPromise = () => {
  const handleClick = () => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        if (Math.random() < 0.5) {
          resolve('foo')
        } else {
          reject('fox')
        }
      }, 1000)
    })

    return toast.promise(myPromise, {
      pending: 'Loading',
      success: 'Got the data',
      error: 'Error when fetching'
    })
  }

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-timer-2-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Promise
      </Typography>
      <Typography className='mbe-3'>Update automatically when promise resolves / fails.</Typography>
      <Button className='mbe-8' variant='contained' onClick={handleClick}>
        Promise
      </Button>
    </div>
  )
}

export default ToastsPromise
Emoji

Add any emoji instead of an icon

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsEmoji = () => {
  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-emoji-sticker-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Emoji
      </Typography>
      <Typography className='mbe-3'>Add any emoji instead of an icon</Typography>
      <Button className='mbe-8' variant='contained' onClick={() => toast('Good Job!', { icon: '👏' })}>
        Emoji
      </Button>
    </div>
  )
}

export default ToastsEmoji
Themed

Customize the default styles the way you want.

// MUI Imports
import Button from '@mui/material/Button'
import { useTheme } from '@mui/material/styles'
import Typography from '@mui/material/Typography'

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsThemed = () => {
  // Hooks
  const theme = useTheme()

  const handleClick = () => {
    return toast.success('Look at me, I have brand styles.', {
      style: {
        padding: '16px',
        color: theme.palette.primary.main,
        border: `1px solid ${theme.palette.primary.main}`,
        backgroundColor: theme.palette.background.paper
      },
      className: 'custom-toast',
      theme: 'colored',
      closeButton: false,
      progressStyle: {
        backgroundColor: theme.palette.primary.main
      }
    })
  }

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-palette-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Themed
      </Typography>
      <Typography className='mbe-3'>Customize the default styles the way you want.</Typography>
      <Button className='mbe-8' variant='contained' onClick={handleClick}>
        Themed
      </Button>
    </div>
  )
}

export default ToastsThemed
Custom

Make a toast using any custom content

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsCustom = () => {
  const handleClick = () => {
    return toast(
      t => (
        <div className='w-full flex items-center justify-between'>
          <div className='flex items-center'>
            <Avatar alt='Victor Anderson' src='/images/avatars/3.png' className='mie-3 w-10 h-10' />
            <div>
              <Typography variant='h6'>John Doe</Typography>
              <Typography variant='caption'>Sure! 8:30pm works great!</Typography>
            </div>
          </div>
          <IconButton onClick={() => toast.dismiss(t.toastProps.toastId)} size='small'>
            <i className='ri-close-line text-xl text-textPrimary' />
          </IconButton>
        </div>
      ),
      {
        style: {
          minWidth: '300px'
        },
        closeButton: false
      }
    )
  }

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-pencil-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Custom
      </Typography>
      <Typography className='mbe-3'>Make a toast using any custom content</Typography>
      <Button className='mbe-8' variant='contained' onClick={handleClick}>
        Custom
      </Button>
    </div>
  )
}

export default ToastsCustom
Custom Position

You can change the toast's position as you like.

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsCustomPosition = () => {
  const handleClick = () => {
    return toast.success('Always at the bottom.', {
      position: 'bottom-right'
    })
  }

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-layout-grid-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Custom Position
      </Typography>
      <Typography className='mbe-3'>You can change the toast's position as you like.</Typography>
      <Button className='mbe-8' variant='contained' onClick={handleClick}>
        Position
      </Button>
    </div>
  )
}

export default ToastsCustomPosition
Remove Programmatically

Remove last or all toast(s) programmatically

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

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsProgrammatically = () => {
  const toastId = useRef(null)

  const notify = () => (toastId.current = toast('Lorem ipsum dolor'))

  const dismiss = () => toast.dismiss(toastId.current)

  const dismissAll = () => toast.dismiss()

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-braces-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Remove Programmatically
      </Typography>
      <Typography className='mbe-3'>Remove last or all toast(s) programmatically</Typography>
      <div className='flex gap-4 mbe-8'>
        <Button variant='contained' onClick={notify}>
          Notify
        </Button>
        <Button variant='contained' onClick={dismiss}>
          Dismiss
        </Button>
        <Button variant='contained' onClick={dismissAll}>
          Dismiss All
        </Button>
      </div>
    </div>
  )
}

export default ToastsProgrammatically
Prevent Duplicate

Prevent duplicate toasts from being created.

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

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

// Third-party Imports
import { toast } from 'react-toastify'

const ToastsPreventDuplicate = () => {
  const toastId = useRef(null)

  const notify = () => {
    if (!toast.isActive(toastId.current)) {
      toastId.current = toast('I cannot be duplicated!')
    }
  }

  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-clipboard-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Prevent Duplicate
      </Typography>
      <Typography className='mbe-3'>Prevent duplicate toasts from being created.</Typography>
      <Button className='mbe-8' variant='contained' onClick={notify}>
        Notify
      </Button>
    </div>
  )
}

export default ToastsPreventDuplicate
Flip

Change the default transition as per your needs

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

// Third-party Imports
import { toast, Flip } from 'react-toastify'

const ToastsFlip = () => {
  return (
    <div className='flex text-center flex-col items-center'>
      <i className='ri-restart-line mbe-2 text-[28px]' />
      <Typography className='mbe-4' variant='h5'>
        Flip
      </Typography>
      <Typography className='mbe-3'>Change the default transition as per your needs</Typography>
      <Button
        className='mbe-8'
        variant='contained'
        onClick={() =>
          toast('Blank Toast', {
            transition: Flip
          })
        }
      >
        Blank
      </Button>
    </div>
  )
}

export default ToastsFlip