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

Click the buttons to launch the alerts.

HTML
javascript
umd

ES UMD

        
            
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="primary">
        Primary
      </button>
      <button
        class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-200 focus:bg-primary-accent-200 focus:outline-none focus:ring-0 active:bg-primary-accent-200 dark:bg-primary-300 dark:hover:bg-primary-400 dark:focus:bg-primary-400 dark:active:bg-primary-400"
        id="secondary">
        Secondary
      </button>
      <button
        class="inline-block rounded bg-success px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-success-3 transition duration-150 ease-in-out hover:bg-success-accent-300 hover:shadow-success-2 focus:bg-success-accent-300 focus:shadow-success-2 focus:outline-none focus:ring-0 active:bg-success-600 active:shadow-success-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="success">
        Success
      </button>
      <button
        class="inline-block rounded bg-danger px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-danger-3 transition duration-150 ease-in-out hover:bg-danger-accent-300 hover:shadow-danger-2 focus:bg-danger-accent-300 focus:shadow-danger-2 focus:outline-none focus:ring-0 active:bg-danger-600 active:shadow-danger-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="danger">
        Danger
      </button>
      <button
        class="inline-block rounded bg-warning px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-warning-3 transition duration-150 ease-in-out hover:bg-warning-accent-300 hover:shadow-warning-2 focus:bg-warning-accent-300 focus:shadow-warning-2 focus:outline-none focus:ring-0 active:bg-warning-600 active:shadow-warning-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="warning">
        Warning
      </button>
      <button
        class="inline-block rounded bg-info px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-info-3 transition duration-150 ease-in-out hover:bg-info-accent-300 hover:shadow-info-2 focus:bg-info-accent-300 focus:shadow-info-2 focus:outline-none focus:ring-0 active:bg-info-600 active:shadow-info-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="info">
        Info
      </button>
      <button
        class="inline-block rounded bg-neutral-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-600 shadow-light-3 transition duration-150 ease-in-out hover:bg-neutral-200 hover:shadow-light-2 focus:bg-neutral-200 focus:shadow-light-2 focus:outline-none focus:ring-0 active:bg-neutral-200 active:shadow-light-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="light">
        Light
      </button>
      <button
        class="inline-block rounded bg-neutral-800 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-neutral-50 shadow-dark-3 transition duration-150 ease-in-out hover:bg-neutral-700 hover:shadow-dark-2 focus:bg-neutral-700 focus:shadow-dark-2 focus:outline-none focus:ring-0 active:bg-neutral-900 active:shadow-dark-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="dark">
        Dark
      </button>

    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
      role="alert"
      id="alert-primary"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple primary alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800 dark:bg-[#202124] dark:text-secondary-400"
      role="alert"
      id="alert-secondary"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple secondary alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700 dark:bg-green-950 dark:text-success-500/80"
      role="alert"
      id="alert-success"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple success alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500"
      role="alert"
      id="alert-danger"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple danger alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 dark:bg-[#2e2005] dark:text-warning-500"
      role="alert"
      id="alert-warning"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple warning alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-info-100 px-6 py-5 text-base text-info-800 dark:bg-[#11242a] dark:text-info-500"
      role="alert"
      id="alert-info"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple info alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-neutral-100 px-6 py-5 text-base text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100"
      role="alert"
      id="alert-light"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple light alert - check it out!
    </div>
    <div
      class="z-[1050] hidden w-full items-center rounded-lg bg-[#202124] px-6 py-5 text-base text-zinc-100 dark:text-zinc-100"
      role="alert"
      id="alert-dark"
      data-twe-alert-init
      data-twe-position="top-right"
      data-twe-width="538px"
      data-twe-stacking="true"
      data-twe-autohide="true"
      data-twe-delay="2000">
      A simple dark alert - check it out!
    </div>

        
            
    // Initialization for ES Users
    import { Alert, initTWE } from 'tw-elements';

    initTWE({ Alert });

    const triggersBasic = [
      "primary",
      "secondary",
      "success",
      "danger",
      "warning",
      "info",
      "light",
      "dark",
    ];
    const instancesBasic = [
      "alert-primary",
      "alert-secondary",
      "alert-success",
      "alert-danger",
      "alert-warning",
      "alert-info",
      "alert-light",
      "alert-dark",
    ];

    triggersBasic.forEach(function (trigger, index) {
      let instance = Alert.getInstance(
        document.getElementById(instancesBasic[index])
      );
      document.getElementById(trigger).addEventListener("click", function () {
        instance.show();
      });
    });

        
            
    const triggersBasic = [
      "primary",
      "secondary",
      "success",
      "danger",
      "warning",
      "info",
      "light",
      "dark",
    ];
    const instancesBasic = [
      "alert-primary",
      "alert-secondary",
      "alert-success",
      "alert-danger",
      "alert-warning",
      "alert-info",
      "alert-light",
      "alert-dark",
    ];

    triggersBasic.forEach(function (trigger, index) {
      let instance = twe.Alert.getInstance(
        document.getElementById(instancesBasic[index])
      );
      document.getElementById(trigger).addEventListener("click", function () {
        instance.show();
      });
    });

Static 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="w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="alert-static-primary"
        data-twe-alert-init>
        A simple primary alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800 dark:bg-[#202124] dark:text-secondary-400"
        role="alert"
        id="alert-static-secondary"
        data-twe-alert-init>
        A simple secondary alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700 dark:bg-green-950 dark:text-success-500/80"
        role="alert"
        id="alert-static-success"
        data-twe-alert-init>
        A simple success alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500"
        role="alert"
        id="alert-static-danger"
        data-twe-alert-init>
        A simple danger alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 dark:bg-[#2e2005] dark:text-warning-500"
        role="alert"
        id="alert-static-warning"
        data-twe-alert-init>
        A simple warning alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-info-100 px-6 py-5 text-base text-info-800 dark:bg-[#11242a] dark:text-info-500"
        role="alert"
        id="alert-static-info"
        data-twe-alert-init>
        A simple info alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-neutral-100 px-6 py-5 text-base text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100"
        role="alert"
        id="alert-static-light"
        data-twe-alert-init>
        A simple light alert - check it out!
      </div>
      <div
        class="w-full items-center rounded-lg bg-[#202124] px-6 py-5 text-base text-zinc-100 dark:text-zinc-100"
        role="alert"
        id="alert-static-dark"
        data-twe-alert-init>
        A simple dark alert - check it out!
      </div>

Hey there 👋 we're excited about TW elements 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!

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="w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="alert-static-primary"
        data-twe-alert-init>
        A simple primary alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800 dark:bg-[#202124] dark:text-secondary-400"
        role="alert"
        id="alert-static-secondary"
        data-twe-alert-init>
        A simple secondary alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700 dark:bg-green-950 dark:text-success-500/80"
        role="alert"
        id="alert-static-success"
        data-twe-alert-init>
        A simple success alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500"
        role="alert"
        id="alert-static-danger"
        data-twe-alert-init>
        A simple danger alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 dark:bg-[#2e2005] dark:text-warning-500"
        role="alert"
        id="alert-static-warning"
        data-twe-alert-init>
        A simple warning alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-info-100 px-6 py-5 text-base text-info-800 dark:bg-[#11242a] dark:text-info-500"
        role="alert"
        id="alert-static-info"
        data-twe-alert-init>
        A simple info alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-neutral-100 px-6 py-5 text-base text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100"
        role="alert"
        id="alert-static-light"
        data-twe-alert-init>
        A simple light alert with
        <a href="#" class="font-bold">an example link</a>. Give it a click if
        you like.
      </div>
      <div
        class="w-full items-center rounded-lg bg-[#202124] px-6 py-5 text-base text-zinc-100 dark:text-zinc-100"
        role="alert"
        id="alert-static-dark"
        data-twe-alert-init>
        A simple dark alert with
        <a href="#" class="font-bold">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 info alert - check it out!

A simple light alert - check it out!

A simple dark alert - check it out!

HTML

        
            
      <div
        class="inline-flex w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="alert-static-primary"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple primary alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-secondary-100 px-6 py-5 text-base text-secondary-800 dark:bg-[#202124] dark:text-secondary-400"
        role="alert"
        id="alert-static-secondary"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple secondary alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700 dark:bg-green-950 dark:text-success-500/80"
        role="alert"
        id="alert-static-success"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple success alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-danger-100 px-6 py-5 text-base text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500"
        role="alert"
        id="alert-static-danger"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple danger alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 dark:bg-[#2e2005] dark:text-warning-500"
        role="alert"
        id="alert-static-warning"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple warning alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-info-100 px-6 py-5 text-base text-info-800 dark:bg-[#11242a] dark:text-info-500"
        role="alert"
        id="alert-static-info"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple info alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-neutral-100 px-6 py-5 text-base text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100"
        role="alert"
        id="alert-static-light"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              clip-rule="evenodd" />
          </svg>
        </span>
        A simple light alert - check it out!
      </div>
      <div
        class="inline-flex w-full items-center rounded-lg bg-[#202124] px-6 py-5 text-base text-zinc-100 dark:text-zinc-100"
        role="alert"
        id="alert-static-dark"
        data-twe-alert-init>
        <span class="me-2 h-6 w-6">
          <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="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 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              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="w-full items-center rounded-lg bg-success-100 px-6 py-5 text-base text-success-700 dark:bg-green-950 dark:text-success-500/80"
        role="alert"
        data-twe-alert-init>
        <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/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.

Holy guacamole! You should check in on some of those fields below.

HTML
javascript

        
            
      <div
        class="w-full items-center rounded-lg bg-warning-100 px-6 py-5 text-base text-warning-800 inline-flex dark:bg-[#2e2005] dark:text-warning-500"
        role="alert"
        id="alert-warning"
        data-twe-alert-init>
        <p>
          <strong>Holy guacamole!</strong> You should check in on some of those
          fields below.
        </p>
        <button
          type="button"
          class="ms-auto box-content rounded-none border-none p-1 text-black opacity-50 hover:no-underline hover:opacity-75 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
          data-twe-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,
        initTWE,
      } from "tw-elements";
      
      initTWE({ Alert });

Show

You can manually show alert using show() method.

HTML
javascript
umd

ES UMD

        
            
      <button
        class="mb-3 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="show-button">
        Show alert!
      </button>
      <div
        class="hidden w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-center text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="hidden-alert"
        data-twe-alert-init>
        Hidden alert!
      </div>

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

      const hiddenAlert = document.getElementById("hidden-alert");
      Alert.getInstance(hiddenAlert).show();

        
            
      const hiddenAlert = document.getElementById("hidden-alert");
      twe.Alert.getInstance(hiddenAlert).show();

Hide

You can manually hide alert using hide() method.

Hide me!

HTML
javascript
umd

ES UMD

        
            
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="hide-button">
        Hide me!
      </button>
      <div
        class="mt-3 w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-center text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="showed-alert"
        data-twe-alert-init
        data-twe-alert-show
        data-twe-autohide="false">
        Hide me!
      </div>

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

      const showedAlert = document.getElementById("showed-alert");
      Alert.getInstance(showedAlert).hide();

        
            
      const showedAlert = document.getElementById("showed-alert");
      twe.Alert.getInstance(showedAlert).hide();

Placement

You can set the position of every alert using the data-twe-position attribute.

Select horizontal / vertical alignment

Current position: top-right

HTML
javascript
umd

ES UMD

        
            
      <div
        class="hidden w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="placement-example"
        data-twe-alert-init
        data-twe-position="top-right"
        data-twe-width="538px"
        data-twe-autohide="true"
        data-twe-delay="5000">
        Show me wherever you want!
      </div>

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

      const placementAlert = document.getElementById("placement-example");
      Alert.getInstance(placementAlert).show();

        
            
      const placementAlert = document.getElementById("placement-example");
      twe.Alert.getInstance(placementAlert).show();

Container

You can display an alert anywhere. Just put it in your target element and fill the data-twe-container attribute with id or class of parent.

HTML
javascript
umd

ES UMD

        
            
      <div
        class="hidden w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="container-alert"
        data-twe-alert-init
        data-twe-position="top-right"
        data-twe-width="320px"
        data-twe-container="#parent-container-example">
        Hello from parent element!
      </div>

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

      const containerAlert = document.getElementById("container-alert");
      Alert.getInstance(containerAlert).show();

        
            
      const containerAlert = document.getElementById("container-alert");
      twe.Alert.getInstance(containerAlert).show();

Offset

You can set offset of your alert using a data-twe-offset tag.

HTML
javascript
umd

ES UMD

        
            
      <div
        class="hidden w-full items-center rounded-lg bg-primary-100 px-6 py-5 text-base text-primary-700 dark:bg-slate-900 dark:text-primary-500"
        role="alert"
        id="offset-alert"
        data-twe-alert-init
        data-twe-position="top-right"
        data-twe-width="320px"
        data-twe-offset="100"
        data-twe-autohide="true">
        Offset 100px
      </div>

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

      const offsetAlert = document.getElementById("offset-alert");
      Alert.getInstance(offsetAlert).show();

        
            
      const offsetAlert = document.getElementById("offset-alert");
      twe.Alert.getInstance(offsetAlert).show();

Stacking

You can turn on stacking your alerts using the data-twe-stacking attribute.

HTML
javascript
umd

ES UMD

        
            
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="stacking-trigger-example">
        Show notification
      </button>

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

      let alertCount = 0;

      function* colorGenerator(i) {
        const colors = [
          "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
          "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
          "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
          "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
          "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
          "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
          "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
          "bg-[#202124] text-zinc-100 dark:text-zinc-100",
        ];
  
        while (true) {
          yield colors[i];
  
          i++;
  
          if (i > colors.length - 1) {
            i = 0;
          }
        }
      }
  
      const colorIterator = colorGenerator(0);
  
      document
        .getElementById("stacking-trigger-example")
        .addEventListener("click", () => {
          alertCount++;
          const color = colorIterator.next().value.split(" ");
          const alert = document.createElement("div");
          alert.classList.add(
            "w-full",
            "inline-flex",
            "items-center",
            "rounded-lg",
            "px-6",
            "py-5",
            "text-base",
            ...color
          );
          alert.setAttribute("data-twe-alert-init", "");
          alert.innerHTML = `
          <p class="mb-0"><strong>${alertCount}.</strong> Stacking alert</p>

          <button
            type="button"
            class="ms-auto box-content rounded-none border-none p-1 text-black opacity-50 hover:no-underline hover:opacity-75 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
            data-twe-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]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <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>`;
        
        document.body.appendChild(alert);

        const alertInstance = new Alert(alert, {
          stacking: true,
          width: "450px",
          position: "bottom-right",
          autohide: true,
          delay: 5000,
        });

        alertInstance.show();
      });

        
            
      let alertCount = 0;

      function* colorGenerator(i) {
        const colors = [
          "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
          "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
          "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
          "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
          "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
          "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
          "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
          "bg-[#202124] text-zinc-100 dark:text-zinc-100",
        ];
  
        while (true) {
          yield colors[i];
  
          i++;
  
          if (i > colors.length - 1) {
            i = 0;
          }
        }
      }
  
      const colorIterator = colorGenerator(0);
  
      document
        .getElementById("stacking-trigger-example")
        .addEventListener("click", () => {
          alertCount++;
          const color = colorIterator.next().value.split(" ");
          const alert = document.createElement("div");
          alert.classList.add(
            "w-full",
            "inline-flex",
            "items-center",
            "rounded-lg",
            "px-6",
            "py-5",
            "text-base",
            ...color
          );
          alert.setAttribute("data-twe-alert-init", "");
          alert.innerHTML = `
          <p class="mb-0"><strong>${alertCount}.</strong> Stacking alert</p>

          <button
            type="button"
            class="ms-auto box-content rounded-none border-none p-1 text-black opacity-50 hover:no-underline hover:opacity-75 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
            data-twe-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]:h-6 [&>svg]:w-6">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="currentColor">
                <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>`;
        
        document.body.appendChild(alert);

        const alertInstance = new twe.Alert(alert, {
          stacking: true,
          width: "450px",
          position: "bottom-right",
          autohide: true,
          delay: 5000,
        });

        alertInstance.show();
      });

Stacking - Container

You can also stack alerts inside the container.

HTML
javascript
umd

ES UMD

        
            
      <button
        class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
        id="stacking-container-trigger-example">
        Show notification
      </button>

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

      let alertCount = 0;

      function* colorGenerator(i) {
        const colors = [
          "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
          "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
          "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
          "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
          "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
          "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
          "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
          "bg-[#202124] text-zinc-100 dark:text-zinc-100",
        ];

        while (true) {
          yield colors[i];

          i++;

          if (i > colors.length - 1) {
            i = 0;
          }
        }
      }

      const colorIterator = colorGenerator(0);

      document
        .getElementById("stacking-container-trigger-example")
        .addEventListener("click", () => {
          alertCount++;
          const color = colorIterator.next().value.split(" ");
          const container = document.getElementById(
            "parent-stacking-container-example"
          );
          const alert = document.createElement("div");
          alert.classList.add(
            "w-full",
            "inline-flex",
            "items-center",
            "rounded-lg",
            "px-6",
            "py-5",
            "text-base",
            ...color
          );
          alert.setAttribute("data-twe-alert-init", "");
          alert.innerHTML = `
            <p class="mb-0"><strong>${alertCount}.</strong> Stacking alert</p>

            <button
              type="button"
              class="ms-auto box-content rounded-none border-none p-1 text-black opacity-50 hover:no-underline hover:opacity-75 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
              data-twe-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]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </button>
          `;

          container.appendChild(alert);

          const alertInstance = new Alert(alert, {
            container: "#parent-stacking-container-example",
            stacking: true,
            width: "250px",
            position: "top-right",
            autohide: true,
            delay: 5000,
          });

          alertInstance.show();
        });

        
            
      let alertCount = 0;

      function* colorGenerator(i) {
        const colors = [
          "bg-primary-100 text-primary-700 dark:bg-slate-900 dark:text-primary-500",
          "bg-secondary-100 text-secondary-800 dark:bg-[#202124] dark:text-secondary-400",
          "bg-success-100 text-success-700 dark:bg-green-950 dark:text-success-500/80",
          "bg-info-100 text-info-800 dark:bg-[#11242a] dark:text-info-500",
          "bg-warning-100 text-warning-800 dark:bg-[#2e2005] dark:text-warning-500",
          "bg-danger-100 text-danger-700 dark:bg-[#2c0f14] dark:text-danger-500",
          "bg-neutral-100 text-zinc-600 dark:bg-neutral-600 dark:text-neutral-100",
          "bg-[#202124] text-zinc-100 dark:text-zinc-100",
        ];

        while (true) {
          yield colors[i];

          i++;

          if (i > colors.length - 1) {
            i = 0;
          }
        }
      }

      const colorIterator = colorGenerator(0);

      document
        .getElementById("stacking-container-trigger-example")
        .addEventListener("click", () => {
          alertCount++;
          const color = colorIterator.next().value.split(" ");
          const container = document.getElementById(
            "parent-stacking-container-example"
          );
          const alert = document.createElement("div");
          alert.classList.add(
            "w-full",
            "inline-flex",
            "items-center",
            "rounded-lg",
            "px-6",
            "py-5",
            "text-base",
            ...color
          );
          alert.setAttribute("data-twe-alert-init", "");
          alert.innerHTML = `
            <p class="mb-0"><strong>${alertCount}.</strong> Stacking alert</p>

            <button
              type="button"
              class="ms-auto box-content rounded-none border-none p-1 text-black opacity-50 hover:no-underline hover:opacity-75 focus:shadow-none focus:outline-none dark:brightness-200 dark:grayscale dark:invert"
              data-twe-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]:h-6 [&>svg]:w-6">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor">
                  <path
                    fill-rule="evenodd"
                    d="M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z"
                    clip-rule="evenodd" />
                </svg>
              </span>
            </button>
          `;

          container.appendChild(alert);

          const alertInstance = new twe.Alert(alert, {
            container: "#parent-stacking-container-example",
            stacking: true,
            width: "250px",
            position: "top-right",
            autohide: true,
            delay: 5000,
          });

          alertInstance.show();
        });

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.
`position`	String / null	`null`	Sets the position of the alert. It can include horizontal options: `top` or `bottom`, and vertical options: `left`, `center`, or `right`. It can also be a combination of any horizontal and vertical values, for example, `top-left`.
`width`	String	`'unset'`	Sets width of alert.
`container`	String	`-`	Defines id/class of the parent element.
`offset`	Number	`10`	Defines offset of the element.
`stacking`	Boolean	`false`	Enables stacking alerts.
`appendToBody`	Boolean	`false`	Appends element to the end of the body.

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.

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'})`

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

Alerts

Tailwind CSS Alerts

Basic examples

Static examples

Link color

Icons

Additional content

Well done!

Dismissing

Show

Hide

Placement

Select horizontal / vertical alignment

Current position: top-right

Container

Offset

Stacking

Stacking - Container

Alerts - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Classes

Methods

Events

Access restricted

To view this section you must have an active PRO account

Alerts

Tailwind CSS Alerts

Basic examples

Static examples

Link color

Icons

Additional content

Well done!

Dismissing

Show

Hide

Placement

Select horizontal / vertical alignment

Current position: top-right

Container

Offset

Stacking

Stacking - Container

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):

Alerts - API

Import

Usage

Via data attributes

Dismiss

Via JavaScript

Options

Classes

Methods

Events