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:

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.

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.

Feedback toast#

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

Toast with button#

Add a button to the toast component to allow the user to perform an action or close the 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 <ToastToggle> component to allow the user to close the toast component.

Custom dismissal handling#

By passing the onDismiss callback prop to the <ToastToggle> component, you gain the ability to define your preferred dismissal handling (ex: using other toast libraries like react-toastfy). When onDismiss is provided, the internal state of the <Toast /> component will remain unchanged upon clicking <ToastToggle>.

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"
  },
  "toggle": {
    "base": "-m-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#