Tailwind CSS Toast - Free Examples & Tutorial

Tailwind CSS Toasts

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

Required ES init: Toast *

* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using Tailwind Elements ES format then you should pass the required components to the initTE method.

Basic example

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

HTML
javascript

        
            
      <div
        class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-white bg-clip-padding text-sm shadow-lg shadow-black/5 data-[te-toast-show]:block data-[te-toast-hide]:hidden dark:bg-neutral-600"
        id="static-example"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-te-autohide="false"
        data-te-toast-init
        data-te-toast-show>
        <div
          class="flex items-center justify-between rounded-t-lg border-b-2 border-neutral-100 border-opacity-100 bg-white bg-clip-padding px-4 pb-2 pt-2.5 dark:border-opacity-50 dark:bg-neutral-600">
          <p class="font-bold text-neutral-500 dark:text-neutral-200">
            MDBootstrap
          </p>
          <div class="flex items-center">
            <p class="text-xs text-neutral-600 dark:text-neutral-300">
              11 mins ago
            </p>
            <button
              type="button"
              class="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"
              data-te-toast-dismiss
              aria-label="Close">
              <span
                class="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"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12" />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="break-words rounded-b-lg bg-white px-4 py-4 text-neutral-700 dark:bg-neutral-600 dark:text-neutral-200">
          Static Example
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Toast,
        initTE,
      } from "tw-elements";
      
      initTE({ Toast });

Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

Colors

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

HTML
javascript

        
            
      <div
        class="pointer-events-auto mx-auto mb-4 hidden w-96 max-w-full rounded-lg bg-primary-100 bg-clip-padding text-sm text-primary-700 shadow-lg shadow-black/5 data-[te-toast-show]:block data-[te-toast-hide]:hidden"
        id="static-example"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-te-autohide="false"
        data-te-toast-init
        data-te-toast-show>
        <div
          class="flex items-center justify-between rounded-t-lg border-b-2 border-primary-200 bg-primary-100 bg-clip-padding px-4 pb-2 pt-2.5 text-primary-700">
          <p class="flex items-center font-bold text-primary-700">
            <span class="mr-2 h-4 w-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="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"
                  clip-rule="evenodd" />
              </svg>
            </span>
            MDBootstrap
          </p>
          <div class="flex items-center">
            <p class="text-xs text-primary-700">11 mins ago</p>
            <button
              type="button"
              class="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"
              data-te-toast-dismiss
              aria-label="Close">
              <span
                class="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"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12" />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="break-words rounded-b-lg bg-primary-100 px-4 py-4 text-primary-700">
          Hello, world! This is a toast message.
        </div>
      </div>
      <div
        class="pointer-events-auto mx-auto mb-4 hidden w-96 max-w-full rounded-lg bg-success-100 bg-clip-padding text-sm text-success-700 shadow-lg shadow-black/5 data-[te-toast-show]:block data-[te-toast-hide]:hidden"
        id="static-example"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-te-autohide="false"
        data-te-toast-init
        data-te-toast-show>
        <div
          class="flex items-center justify-between rounded-t-lg border-b-2 border-success/20 bg-success-100 bg-clip-padding px-4 pb-2 pt-2.5">
          <p class="flex items-center font-bold text-success-700">
            <span class="mr-2 h-4 w-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="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"
                  clip-rule="evenodd" />
              </svg>
            </span>
            MDBootstrap
          </p>
          <div class="flex items-center">
            <p class="text-xs text-success-700">11 mins ago</p>
            <button
              type="button"
              class="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"
              data-te-toast-dismiss
              aria-label="Close">
              <span
                class="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"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12" />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="break-words rounded-b-lg bg-success-100 px-4 py-4 text-success-700">
          Hello, world! This is a toast message.
        </div>
      </div>
      <div
        class="pointer-events-auto mx-auto mb-4 hidden w-96 max-w-full rounded-lg bg-warning-100 bg-clip-padding text-sm text-warning-700 shadow-lg shadow-black/5 data-[te-toast-show]:block data-[te-toast-hide]:hidden"
        id="static-example"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-te-autohide="false"
        data-te-toast-init
        data-te-toast-show>
        <div
          class="flex items-center justify-between rounded-t-lg border-b-2 border-warning-200 bg-warning-100 bg-clip-padding px-4 pb-2 pt-2.5 text-warning-700">
          <p class="flex items-center font-bold text-warning-700">
            <span class="mr-2 h-4 w-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="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"
                  clip-rule="evenodd" />
              </svg>
            </span>
            MDBootstrap
          </p>
          <div class="flex items-center">
            <p class="text-xs text-warning-700 opacity-90">11 mins ago</p>
            <button
              type="button"
              class="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"
              data-te-toast-dismiss
              aria-label="Close">
              <span
                class="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"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12" />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="break-words rounded-b-lg bg-warning-100 px-4 py-4 text-warning-700">
          Hello, world! This is a toast message.
        </div>
      </div>
      <div
        class="pointer-events-auto mx-auto mb-4 hidden w-96 max-w-full rounded-lg bg-danger-100 bg-clip-padding text-sm text-danger-700 shadow-lg shadow-black/5 data-[te-toast-show]:block data-[te-toast-hide]:hidden"
        id="static-example"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
        data-te-autohide="false"
        data-te-toast-init
        data-te-toast-show>
        <div
          class="flex items-center justify-between rounded-t-lg border-b-2 border-danger-200 bg-danger-100 bg-clip-padding px-4 pb-2 pt-2.5 text-danger-700">
          <p class="flex items-center font-bold text-danger-700">
            <span class="mr-2 h-4 w-4">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path
                  fill-rule="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"
                  clip-rule="evenodd" />
              </svg>
            </span>
            MDBootstrap
          </p>
          <div class="flex items-center">
            <p class="text-xs text-danger-700">11 mins ago</p>
            <button
              type="button"
              class="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"
              data-te-toast-dismiss
              aria-label="Close">
              <span
                class="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"
                  stroke-width="1.5"
                  stroke="currentColor"
                  class="h-6 w-6">
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12" />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <div
          class="break-words rounded-b-lg bg-danger-100 px-4 py-4 text-danger-700">
          Hello, world! This is a toast message.
        </div>
      </div>

        
            
      // Initialization for ES Users
      import {
        Toast,
        initTE,
      } from "tw-elements";
      
      initTE({ Toast });

Toasts - API

Import

Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { Toast, initTE } from "tw-elements";
        initTE({ Toast });

        
            
        import "tw-elements";

Usage

Via data attributes

Elements with the data-te-toast-init attribute will be automatically initialized - you can set all available options with data attributes. For ES format, you must first import and call the initTE method.

HTML

        
            
        <div class="flex justify-center space-x-2">
          <div
            class="pointer-events-auto mx-auto hidden w-96 max-w-full rounded-lg bg-white bg-clip-padding text-sm shadow-lg data-[te-toast-show]:block data-[te-toast-hide]:hidden dark:bg-zinc-600"
            id="static-example"
            role="alert"
            aria-live="assertive"
            aria-atomic="true"
            data-te-autohide="false"
            data-te-toast-init
            data-te-toast-show>
            <div
              class="flex items-center justify-between rounded-t-lg border-b border-gray-200 bg-white bg-clip-padding px-3 py-2 dark:border-gray-500 dark:bg-zinc-600">
              <p class="font-bold text-gray-500 dark:text-gray-200">
                MDBootstrap
              </p>
              <div class="flex items-center">
                <p class="text-xs text-gray-600 dark:text-gray-300">
                  11 mins ago
                </p>
                <button
                  type="button"
                  class="ml-2 box-content h-4 w-4 rounded-none border-none text-black opacity-50 hover:text-black hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-gray-300"
                  data-te-toast-dismiss
                  aria-label="Close">
                  <span
                    class="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
                      class="w-[1em]"
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 16 16"
                      fill="currentColor">
                      <path
                        d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z" />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="break-words rounded-b-lg bg-white px-3 py-2.5 text-gray-700 dark:bg-zinc-600 dark:text-gray-300">
              Static Example
            </div>
          </div>
        </div>

Dismiss

Dismissal can be achieved with data attributes on a button within the toast as demonstrated below:

HTML

        
            
            <button
              type="button"
              class="ml-2 box-content h-4 w-4 rounded-none border-none text-black opacity-50 hover:text-black hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-gray-300"
              data-te-toast-dismiss
              aria-label="Close"></button>

or on a button outside the toast using the data-te-target as demonstrated below:

HTML

        
            
              <button
                type="button"
                class="ml-2 box-content h-4 w-4 rounded-none border-none text-black opacity-50 hover:text-black hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none dark:text-gray-300"
                data-te-toast-dismiss
                data-te-target="#myToast"
                aria-label="Close"></button>

Via JavaScript

You can access an instance from your Javascript code, by using the getInstance static method of the Toast class - it allows making use of all the public methods listed in the Methods section.

javascript
umd

ES UMD

        
            
        Toast.getInstance(document.getElementById('myToast')).update({
          position: ..., 
          offset: ..., 
          container: ..., 
        });

        
            
        te.Toast.getInstance(document.getElementById('myToast')).update({
          position: ..., 
          offset: ..., 
          container: ..., 
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-position="".

Name	Type	Default	Description
`width`	String / null	`null`	Defines the width of a toast.
`position`	String	`'top-left'`	Changes position of toast.
`color`	String	`null`	Sets background of a toast (basic MDB colors).
`offset`	Number	`'10'`	Changes offset of toast.
`container`	String	`-`	Defines id/class of the parent element.
`autohide`	Boolean	`true`	Toasts will hide automatically or not.
`animation`	Boolean	`true`	Toasts will be animated or not.
`delay`	Number	`500`	Sets length of animation delay.
`appendToBody`	Boolean	`false`	Appends element to the end of body.
`stacking`	Boolean	`true`	Enables stacking notifications.

Classes

Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-te-class, as in data-te-class-fadeIn="animate-[fade-in_0.5s_both]".

Name	Default	Description
`fadeIn`	animate-[fade-in_0.3s_both] p-[auto] motion-reduce:transition-none motion-reduce:animate-none	Sets fadeIn animation styles.
`fadeOut`	animate-[fade-out_0.3s_both] p-[auto] motion-reduce:transition-none motion-reduce:animate-none	Sets fadeOut animation styles.

Methods

Method	Description	Example
`show`	Shows toast.	`myToast.show()`
`hide`	Hides toast.	`myToast.hide()`
`dispose`	Removes an `Toast` instance	`myToast.dispose()`
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element.	`Toast.getInstance()`
`getOrCreateInstance`	Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.	`Toast.getOrCreateInstance()`
`update`	Updates options of an `Toast` instance.	`myToast.update({position: 'top-center'})`

javascript
umd

ES UMD

        
            
        Toast.getInstance(document.getElementById('myToast')).show();

        
            
        te.Toast.getInstance(document.getElementById('myToast')).show();

Events

Event type	Description
`show.te.toast`	Emitted when a toast has been toggled.
`shown.te.toast`	Emitted once toast is shown.
`hide.te.toast`	Emitted when a toast has been toggled.
`hidden.te.toast`	Emitted once toast is hidden.

JavaScript

        
            
        const myToastEl = document.getElementById('myToast')
        myToastEl.addEventListener('hidden.te.toast', () => {
          // do something...
        });

Toasts

Tailwind CSS Toasts

Basic example

Colors

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Toasts - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Classes

Methods

Events