React Toast - Flowbite

Push notifications to your website visitors using the toast component and choose from multiple sizes, colors, styles, position and icons based on React and Tailwind CSS

The toast component can be used to show notifications to your users in a non-intrusive way by positioning it to the corner of the screen. It can be used to show simple messages or more complex ones with buttons and other elements.

Choose from one of the examples below that include different layouts, colors, styles, and icons that you can also customize using React props and the utility classes from Tailwind CSS.

To start using the toast component make sure you import it from Flowbite React:

'use client';

import { Toast } from 'flowbite-react';

Default toast

Use the default <Toast> React component to show a simple toast message with an icon and a text message.

Edit on GitHub
Set yourself free.
  • React TypeScript
'use client';

import { Toast } from 'flowbite-react';

export default function DefaultToast() {
  return (
    <Toast>
      <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-200">
        <HiFire className="h-5 w-5" />
      </div>
      <div className="ml-3 text-sm font-normal">
        Set yourself free.
      </div>
      <Toast.Toggle />
    </Toast>
  )
}

Toast colors

Choose one of the following toast examples based on form submission messages to update the color of the component by using the bg and text utility classes from Tailwind CSS.

Edit on GitHub
Item moved successfully.
Item has been deleted.
Improve password difficulty.
  • React TypeScript
'use client';

import { Toast } from 'flowbite-react';

export default function Colors() {
  return (
    <div className="flex flex-col gap-4">
      <Toast>
        <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
          <HiCheck className="h-5 w-5" />
        </div>
        <div className="ml-3 text-sm font-normal">
          Item moved successfully.
        </div>
        <Toast.Toggle />
      </Toast>
      <Toast>
        <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
          <HiX className="h-5 w-5" />
        </div>
        <div className="ml-3 text-sm font-normal">
          Item has been deleted.
        </div>
        <Toast.Toggle />
      </Toast>
      <Toast>
        <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
          <HiExclamation className="h-5 w-5" />
        </div>
        <div className="ml-3 text-sm font-normal">
          Improve password difficulty.
        </div>
        <Toast.Toggle />
      </Toast>
    </div>
  )
}

Feedback toast

Use this example to show a message based on form submission to indicate errors or successful actions.

Edit on GitHub
Message sent successfully.
  • React TypeScript
'use client';

import { Toast } from 'flowbite-react';

export default function SimpleToast() {
  return (
    <div className="space-x-4 divide-x divide-gray-200 dark:divide-gray-700">
      <Toast>
        <FaTelegramPlane className="h-5 w-5 text-cyan-600 dark:text-cyan-500" />
        <div className="pl-4 text-sm font-normal">
          Message sent successfully.
        </div>
      </Toast>
    </div>
  )
}

Toast with button

Add a button to the toast component to allow the user to perform an action or close the toast.

Edit on GitHub
Conversation archived.

Undo

  • React TypeScript
'use client';

import { Toast } from 'flowbite-react';

export default function UndoButton() {
  return (
    <Toast>
      <div className="text-sm font-normal">
        Conversation archived.
      </div>
      <div className="ml-auto flex items-center space-x-2">
        <a
          className="rounded-lg p-1.5 text-sm font-medium text-cyan-600 hover:bg-cyan-100 dark:text-cyan-500 dark:hover:bg-gray-700"
          href="/toast"
        >
          <p>
            Undo
          </p>
        </a>
        <Toast.Toggle />
      </div>
    </Toast>
  )
}

Interactive toast

This component can be used to show more complex messages with buttons and other elements that can be used to perform actions and use the <Toast.Toggle> component to allow the user to close the toast component.

Edit on GitHub
Update available
A new software version is available for download.
  • React TypeScript
'use client';

import { Button, Toast } from 'flowbite-react';

export default function InteractiveToast() {
  return (
    <Toast>
      <div className="flex items-start">
        <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-cyan-100 text-cyan-500 dark:bg-cyan-900 dark:text-cyan-300">
          <MdLoop className="h-5 w-5" />
        </div>
        <div className="ml-3 text-sm font-normal">
          <span className="mb-1 text-sm font-semibold text-gray-900 dark:text-white">
            Update available
          </span>
          <div className="mb-2 text-sm font-normal">
            A new software version is available for download.
          </div>
          <div className="flex-start flex gap-2">
            <div className="w-full">
              <Button size="xs">
                Update
              </Button>
            </div>
            <div className="w-full">
              <Button
                color="light"
                size="xs"
              >
                <p>
                  Not now
                </p>
              </Button>
            </div>
          </div>
        </div>
        <Toast.Toggle />
      </div>
    </Toast>
  )
}

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

{
  "root": {
    "base": "flex w-full max-w-xs items-center rounded-lg bg-white p-4 text-gray-500 shadow dark:bg-gray-800 dark:text-gray-400",
    "closed": "opacity-0 ease-out",
    "removed": "hidden"
  },
  "toggle": {
    "base": "-mx-1.5 -my-1.5 ml-auto inline-flex h-8 w-8 rounded-lg bg-white p-1.5 text-gray-400 hover:bg-gray-100 hover:text-gray-900 focus:ring-2 focus:ring-gray-300 dark:bg-gray-800 dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white",
    "icon": "h-5 w-5 shrink-0"
  }
}

References