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

Table of Contents#

Default toast#

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

Edit on GitHub
  • 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
  • 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
  • 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
  • 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
  • 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">
              <ButtonComponentFn size="xs">
                Update
              </ButtonComponentFn>
            </div>
            <div className="w-full">
              <ButtonComponentFn
                color="light"
                size="xs"
              >
                <p>
                  Not now
                </p>
              </ButtonComponentFn>
            </div>
          </div>
        </div>
        <Toast.Toggle />
      </div>
    </Toast>
  )
}

Custom dismissal handling#

By passing the onDismiss callback prop to the <Toast.Toggle> 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 <Toast.Toggle>.

Edit on GitHub
  • React TypeScript
'use client';

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

export default function CustomDismissal() {
  const [showToast, setShowToast] = useState(false);
  const props = { showToast, setShowToast };

  return (
    <div className="space-y-4">
      <Button onClick={() => props.setShowToast(!props.showToast)}>Toggle toast</Button>
      {props.showToast && (
        <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 onDismiss={() => props.setShowToast(false)} />
        </Toast>
      )}
    </div>
  )
}

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": "-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#