Tailwind CSS React Toasts

Use responsive toast component with helper examples for notification popup, notification toast, toast message & more. Free download, open-source license.

Basic example

Use this simple toast component with an message, and dismissable close button to show alert messages to your website visitors.

        
            
      import React, { useState } from "react";
      import { TEToast } from "tw-elements-react";
      
      export default function BasicExample(): JSX.Element {
        const [open, setOpen] = useState(true);
      
        return (
          <div>
            <TEToast staticToast open={open}>
              <div className="flex items-center justify-between rounded-t-lg border-b-2 border-neutral-100 border-opacity-100 bg-clip-padding px-4 pb-2 pt-2.5">
                <p className="font-bold text-neutral-500 dark:text-neutral-200">
                  MDBootstrap
                </p>
                <div className="flex items-center">
                  <p className="text-xs text-neutral-600 dark:text-neutral-300">
                    11 mins ago
                  </p>
                  <button
                    type="button"
                    className="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    onClick={() => setOpen(false)}
                    aria-label="Close"
                  >
                    <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div className="break-words rounded-b-lg px-4 py-4 text-neutral-700 dark:text-neutral-200">
                Static Example
              </div>
            </TEToast>
          </div>
        );
      }

Help us spread the word about Tailwind Elements for React (TER)

If you enjoy the project, help it grow & find more contributors by sharing it with your peers. Every share counts, thank you!

Share via Reddit

Colors

Use these contextual toast components to show primary, success, danger, or warning alert messages to your users.

        
            
      import React, { useState } from "react";
      import { TEToast } from "tw-elements-react";
      
      export default function Colors(): JSX.Element {
        const [open1, setOpen1] = useState(true);
        const [open2, setOpen2] = useState(true);
        const [open3, setOpen3] = useState(true);
        const [open4, setOpen4] = useState(true);
      
        return (
          <div>
            <TEToast
              staticToast
              open={open1}
              color="bg-primary-100 text-primary-700"
              className="mb-6"
            >
              <div className="flex items-center justify-between rounded-t-lg border-b-2 border-primary-200 bg-clip-padding px-4 pb-2 pt-2.5">
                <p className="flex items-center font-bold">
                  <span className="[&>svg]:w-4 [&>svg]:h-4 mr-2 -mt-[2px]">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </span>
                  MDBootstrap
                </p>
                <div className="flex items-center">
                  <p className="text-xs text-primary-700">11 mins ago</p>
                  <button
                    type="button"
                    className="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    onClick={() => setOpen1(false)}
                    aria-label="Close"
                  >
                    <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div className="break-words rounded-b-lg px-4 py-4">
                Hello, world! This is a toast message.
              </div>
            </TEToast>
            <TEToast
              staticToast
              open={open2}
              color="bg-success-100 text-success-700"
              className="mb-6"
            >
              <div className="flex items-center justify-between rounded-t-lg border-b-2 border-success/20 bg-clip-padding px-4 pb-2 pt-2.5">
                <p className="flex items-center font-bold">
                  <span className="[&>svg]:w-4 [&>svg]:h-4 mr-2 -mt-[2px]">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </span>
                  MDBootstrap
                </p>
                <div className="flex items-center">
                  <p className="text-xs text-success-700">11 mins ago</p>
                  <button
                    type="button"
                    className="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    onClick={() => setOpen2(false)}
                    aria-label="Close"
                  >
                    <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div className="break-words rounded-b-lg px-4 py-4">
                Hello, world! This is a toast message.
              </div>
            </TEToast>
            <TEToast
              staticToast
              open={open3}
              color="bg-warning-100 text-warning-700"
              className="mb-6"
            >
              <div className="flex items-center justify-between rounded-t-lg border-b-2 border-warning-200 bg-clip-padding px-4 pb-2 pt-2.5">
                <p className="flex items-center font-bold">
                  <span className="[&>svg]:w-4 [&>svg]:h-4 mr-2 -mt-[2px]">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </span>
                  MDBootstrap
                </p>
                <div className="flex items-center">
                  <p className="text-xs text-warning-700 opacity-90">11 mins ago</p>
                  <button
                    type="button"
                    className="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    onClick={() => setOpen3(false)}
                    aria-label="Close"
                  >
                    <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div className="break-words rounded-b-lg px-4 py-4">
                Hello, world! This is a toast message.
              </div>
            </TEToast>
      
            <TEToast staticToast open={open4} color="bg-danger-100 text-danger-700">
              <div className="flex items-center justify-between rounded-t-lg border-b-2 border-danger-200 bg-clip-padding px-4 pb-2 pt-2.5">
                <p className="flex items-center font-bold">
                  <span className="[&>svg]:w-4 [&>svg]:h-4 mr-2 -mt-[2px]">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="currentColor"
                    >
                      <path
                        fillRule="evenodd"
                        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </span>
                  MDBootstrap
                </p>
                <div className="flex items-center">
                  <p className="text-xs text-danger-700">11 mins ago</p>
                  <button
                    type="button"
                    className="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    onClick={() => setOpen4(false)}
                    aria-label="Close"
                  >
                    <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div className="break-words rounded-b-lg px-4 py-4">
                Hello, world! This is a toast message.
              </div>
            </TEToast>
          </div>
        );
      }

Trigger Example

You can open an toast by using the open prop.

        
            
      import React, { useState } from "react";
      import { TEToast } from "tw-elements-react";
      
      export default function TriggerExample(): JSX.Element {
        const [open, setOpen] = useState(false);
      
        return (
          <div>
            <button
              type="button"
              className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
              onClick={() => setOpen(true)}
            >
              Open Toast
            </button>
      
            <TEToast open={open} autohide={true} delay={3000} setOpen={setOpen}>
              <div className="flex items-center justify-between rounded-t-lg border-b-2 border-neutral-100 border-opacity-100 bg-clip-padding px-4 pb-2 pt-2.5">
                <p className="font-bold text-neutral-500 dark:text-neutral-200">
                  MDBootstrap
                </p>
                <div className="flex items-center">
                  <p className="text-xs text-neutral-600 dark:text-neutral-300">
                    11 mins ago
                  </p>
                  <button
                    type="button"
                    className="ml-2 box-content rounded-none border-none opacity-80 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
                    onClick={() => setOpen(false)}
                    aria-label="Close"
                  >
                    <span className="w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25 [&.disabled]:pointer-events-none [&.disabled]:select-none [&.disabled]:opacity-25">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        strokeWidth="1.5"
                        stroke="currentColor"
                        className="h-6 w-6"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          d="M6 18L18 6M6 6l12 12"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
              <div className="break-words rounded-b-lg px-4 py-4 text-neutral-700 dark:text-neutral-200">
                Hello, world! This is a toast message.
              </div>
            </TEToast>
          </div>
        );
      }

If you are looking for more advanced options, try Bootstrap Toasts from MDBootstrap.

Name	Type	Default	Description
`animation`	Boolean	`true`	Allows to animate appearing and disappearing of the toast.
`autohide`	Boolean	`false`	Toasts will hide automatically or not.
`color`	String	`"bg-primary-100 text-primary-800"`	Adds classes with colors to the toast component. Used to changed the colors.
`delay`	Number	`1000`	Sets the delay before hiding the toast. Used only when `autohide` is set to `true`.
`open`	Boolean	`false`	Changes the visibility of the toast.
`setOpen`	React.Dispatch< React.SetStateAction< boolean>>	`-`	Adds a `setState` method to keep the open state value in sync
`staticToast`	Boolean	`false`	Makes the Toast static
`tag`	String	`"div"`	Changes the default tag of the toast component. By default it is a `div` element.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component.

Name	Default	Description
`nonStatic`	fixed top-4 right-4	Sets classes for non-static toasts. Changes the position of the toast.
`wrapper`	pointer-events-auto mx-auto w-96 max-w-full rounded-lg bg-clip-padding text-sm shadow-lg shadow-black/5	Styles the wrapper of the toast.
`wrapperHidden`	opacity-0	Sets classes for wrapper when toast is hidden. Changes the opacity of the toast.
`wrapperTransition`	transition duration-300 ease-in-out motion-reduce:transition-none	Defines the transition of the toast. Used only when `animation` is set to `true`.
`wrapperVisible`	opacity-100	Sets classes for wrapper when the toast is visible. Changes the opacity of the toast.

Name	Description
`onClose`	Fires when the toast is closed. Before the animation ends.
`onClosed`	Fires when the toast is closed. After the animation ends.
`onShow`	Fires when the toast is opening.
`onShown`	Fires when the toast is opened.

Toasts

Basic example

Colors

Trigger Example

Toasts - API

Import

Properties

TEToast

Classes

Events

Toasts

Tailwind CSS React Toasts

Basic example

Colors

Trigger Example

Related resources

Tutorials:

Toasts - API

Import

Properties

TEToast

Classes

Events