search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
    • Overview
    • API

    Toasts

    Tailwind CSS React Toasts

    Use responsive toast component with helper examples for notification popup, notification toast, toast message & more.


    Basic example

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

    Loading...
    • JSX
            
                
          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>
            );
          }
          
            
        

    Hey there 👋 we're excited about TW Elements for React and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Colors

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

    Loading...
    • JSX
            
                
          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.

    Loading...
    • JSX
            
                
          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>
            );
          }
          
            
        

    Related resources

    Tutorials:

    colors icons dark mode text spacing utility first buttons rounded corners shadows sizing

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

    • Basic example
    • Colors
    • Toast Trigger
    • Related resources

    Toasts - API


    Import

    • javascript
            
                
            import { TEToast } from "tw-elements-react";
            
            
        

    Properties

    TEToast

    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.

    Classes

    Custom classes can be passed via theme prop. Create an object with classes like below and pass it to the prop.

    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.

    Events

    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.
    • JSX
            
                
            import React from "react";
            import { TEToast } from "tw-elements-react";
            
            export default function App(): JSX.Element {
              return (
                <div>
                  <TEToast onClosed={()=>console.log('Do something ...')}>
                    A simple toast - check it out!
                  </TEToast>
                </div>
              );
            }
            
            
            
        
    • Import
    • Properties
    • Classes
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com