Tailwind CSS Alert - Free Examples & Tutorial

Use responsive alert component with helper examples for alert box, alert dismiss, alert message, alert animations & more. Free download, open-source license.

Basic examples

Alert offers different levels of severity that requires immediate attention of the end users such as warning, error or confirmation messages, which are determined by a distinctive color. Use one of the the contextual classes below for a different look.

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

HTML

        
            
      <div
        class="mb-4 rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-600"
        role="alert">
        A simple primary alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800"
        role="alert">
        A simple secondary alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-success-100 px-6 py-5 text-base text-success-700"
        role="alert">
        A simple success alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700"
        role="alert">
        A simple danger alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800"
        role="alert">
        A simple warning alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-info-100 px-6 py-5 text-base text-info-800"
        role="alert">
        A simple info alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-neutral-50 px-6 py-5 text-base text-neutral-600"
        role="alert">
        A simple light alert—check it out!
      </div>
      <div
        class="mb-4 rounded-lg bg-neutral-800 px-6 py-5 text-base text-neutral-50 dark:bg-neutral-900"
        role="alert">
        A simple dark alert—check it out!
      </div>

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

Link color

Apply the appropriate class to the links inside any alert boxes to quickly create matching colored links.

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

HTML

        
            
      <div
        class="mb-4 rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700"
        role="alert">
        A simple primary alert with
        <a href="#!" class="font-bold text-primary-700">an example link</a>.
        Give it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800"
        role="alert">
        A simple secondary alert with
        <a href="#!" class="font-bold text-secondary-800">an example link</a>.
        Give it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-success-100 px-6 py-5 text-base text-success-700"
        role="alert">
        A simple success alert with
        <a href="#!" class="font-bold text-success-700">an example link</a>.
        Give it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700"
        role="alert">
        A simple danger alert with
        <a href="#!" class="font-bold text-danger-700">an example link</a>. Give
        it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800"
        role="alert">
        A simple warning alert with
        <a href="#!" class="font-bold text-warning-800">an example link</a>.
        Give it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-info-100 px-6 py-5 text-base text-info-800"
        role="alert">
        A simple info alert with
        <a href="#!" class="font-bold text-info-800">an example link</a>. Give
        it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-neutral-50 px-6 py-5 text-base text-neutral-600"
        role="alert">
        A simple light alert with
        <a href="#!" class="font-bold text-neutral-600">an example link</a>.
        Give it a click if you like.
      </div>
      <div
        class="mb-4 rounded-lg bg-neutral-800 px-6 py-5 text-base text-neutral-50 dark:bg-neutral-900"
        role="alert">
        A simple dark alert with
        <a href="#!" class="font-bold text-neutral-50">an example link</a>. Give
        it a click if you like.
      </div>

Icons

Include a descriptive icon to complement the message inside the alert component with the following example.

A simple primary alert - check it out!

A simple secondary alert - check it out!

A simple success alert - check it out!

A simple danger alert - check it out!

A simple warning alert - check it out!

A simple indigo alert - check it out!

A simple light alert - check it out!

A simple dark alert - check it out!

HTML

        
            
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <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>
        A simple primary alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <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.25zM12.75 9a.75.75 0 00-1.5 0v2.25H9a.75.75 0 000 1.5h2.25V15a.75.75 0 001.5 0v-2.25H15a.75.75 0 000-1.5h-2.25V9z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple secondary alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <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>
        A simple success alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <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>
        A simple danger alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <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>
        A simple warning alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-info-100 px-6 py-5 text-base text-info-800"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <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.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple indigo alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-neutral-50 px-6 py-5 text-base text-neutral-600"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <path
              d="M8.25 10.875a2.625 2.625 0 115.25 0 2.625 2.625 0 01-5.25 0z" />
            <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.125 4.5a4.125 4.125 0 102.338 7.524l2.007 2.006a.75.75 0 101.06-1.06l-2.006-2.007a4.125 4.125 0 00-3.399-6.463z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple light alert - check it out!
      </div>
      <div
        class="mb-3 inline-flex w-full items-center rounded-lg bg-neutral-800 px-6 py-5 text-base text-neutral-50 dark:bg-neutral-900"
        role="alert">
        <span class="mr-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            class="h-5 w-5">
            <path
              fill-rule="evenodd"
              d="M6.32 2.577a49.255 49.255 0 0111.36 0c1.497.174 2.57 1.46 2.57 2.93V21a.75.75 0 01-1.085.67L12 18.089l-7.165 3.583A.75.75 0 013.75 21V5.507c0-1.47 1.073-2.756 2.57-2.93z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple dark alert - check it out!
      </div>

Additional content

Within the alert, you can also place additional elements such as headers, paragraphs, and dividers to be more elaborate and convey more content.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

HTML

        
            
      <div
        class="mb-4 rounded-lg bg-success-100 px-6 py-5 text-base text-success-700"
        role="alert">
        <h4 class="mb-2 text-2xl font-medium leading-tight">Well done!</h4>
        <p class="mb-4">
          Aww yeah, you successfully read this important alert message. This
          example text is going to run a bit longer so that you can see how
          spacing within an alert works with this kind of content.
        </p>
        <hr class="border-success-600 opacity-30" />
        <p class="mb-0 mt-4">
          Whenever you need to, be sure to use margin utilities to keep things
          nice and tidy.
        </p>
      </div>

Dismissing

To skip alerts that the user has already read, we can add an optional close button so the user can easily dismiss it.

HTML
javascript

        
            
      <div
        class="mb-3 hidden w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 data-[te-alert-show]:inline-flex"
        role="alert"
        data-te-alert-init
        data-te-alert-show>
        <strong class="mr-1">Holy guacamole! </strong> You should check in on
        some of those fields below.
        <button
          type="button"
          class="ml-auto box-content rounded-none border-none p-1 text-warning-900 opacity-50 hover:text-warning-900 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
          data-te-alert-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"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="h-6 w-6">
              <path
                fill-rule="evenodd"
                d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
                clip-rule="evenodd" />
            </svg>
          </span>
        </button>
      </div>

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

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 { Alert, initTE } from "tw-elements";
        initTE({ Alert });

        
            
        import "tw-elements";

Usage

Via data attributes

Elements with the data-te-alert-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="alert-dismissible mb-3 hidden w-full items-center rounded-lg bg-yellow-100 px-6 py-5 text-base text-yellow-700 data-[te-alert-show]:inline-flex"
          role="alert"
          data-te-alert-init
          data-te-alert-show>
          <strong class="mr-1">Holy guacamole! </strong> You should check in on
          some of those fields below.
          <button
            type="button"
            class="ml-auto box-content h-4 w-4 rounded-none border-none p-1 text-yellow-900 opacity-50 hover:text-yellow-900 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
            data-te-alert-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"
                viewBox="0 0 16 16"
                fill="#000">
                <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>

Dismiss

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

HTML

        
            
        <button
          type="button"
          class="ml-auto box-content h-4 w-4 rounded-none border-none p-1 text-yellow-900 opacity-50 hover:text-yellow-900 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
          data-te-alert-dismiss
          aria-label="Close"></button>

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

HTML

        
            
        <button
          type="button"
          class="ml-auto box-content h-4 w-4 rounded-none border-none p-1 text-yellow-900 opacity-50 hover:text-yellow-900 hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
          data-te-alert-dismiss
          data-te-target="#my-alert"
          aria-label="Close"></button>

Via JavaScript

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

javascript
umd

ES UMD

        
            
        Alert.getInstance(document.getElementById('myAlert')).update({
          position: ...,
          width: ...,
        });

        
            
        te.Alert.getInstance(document.getElementById('myAlert')).update({
          position: ...,
          width: ...,
        });

Options

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

Name	Type	Default	Description
`delay`	Number	`1000`	Sets the length of animation delay.
`autohide`	Boolean	`false`	Alerts will hide automatically or not (stays in DOM).
`autoclose`	Boolean	`false`	Alerts will close automatically or not (and remove from DOM).
`animation`	Boolean	`true`	Allows to animate appearing and disappearing of the alert.

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-fade-in="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`	Manually shows an alert.	`myAlert.show()`
`hide`	Manually hides an alert.	`myAlert.hide()`
`close`	Manually hides an alert (deletes it from DOM).	`myAlert.close()`
`dispose`	Removes an `Alert` instance	`myAlert.dispose()`
`getInstance`	Static method which allows you to get the alert instance associated to a DOM element.	`Alert.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.	`Alert.getOrCreateInstance()`
`update`	Updates options of an `Alert` instance.	`myAlert.update({position: 'top-right'})`

javascript
umd

ES UMD

        
            
        Alert.getInstance(document.getElementById('myAlert')).show();

        
            
        te.Alert.getInstance(document.getElementById('myAlert')).show();

Events

Event type	Description
`close.te.alert`	Fires immediately when the close instance method is called.
`closed.te.alert`	Fired when the alert has been closed and CSS transitions have completed.

JavaScript

        
            
          const myAlertEl = document.getElementById('myAlert')
          myAlertEl.addEventListener('close.te.alert', () => {
            // do something...
          });

Alerts

Tailwind CSS Alerts

Basic examples

Link color

Icons

Additional content

Well done!

Dismissing

Alerts - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Classes

Methods

Events

Alerts

Tailwind CSS Alerts

Basic examples

Link color

Icons

Additional content

Well done!

Dismissing

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Alerts - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Classes

Methods

Events