Tailwind CSS React Alerts

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

Basic example

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.

        
            
      import React from "react";
      import { TEAlert } from "tw-elements-react";
      
      export default function BasicExample(): JSX.Element {
        return (
          <div>
            <TEAlert staticAlert open={true}>
              A simple primary alert—check it out!
            </TEAlert>
            <TEAlert
              staticAlert
              open={true}
              color="bg-secondary-100 text-secondary-800"
            >
              A simple secondary alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-success-100 text-success-700">
              A simple success alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-danger-100 text-danger-700">
              A simple danger alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-warning-100 text-warning-800">
              A simple warning alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-info-100 text-info-800">
              A simple indigo alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-neutral-50 text-neutral-600">
              A simple light alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-neutral-800 text-neutral-50">
              A simple dark alert—check it out!
            </TEAlert>
          </div>
        );
      }

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

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

Share via Reddit

Link color

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

        
            
      import React from "react";
      import { TEAlert } from "tw-elements-react";
      
      export default function LinkColor(): JSX.Element {
        return (
          <div>
            <TEAlert staticAlert open={true}>
              A simple primary alert with
              <a href="#!" className="font-bold text-primary-700 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert
              staticAlert
              open={true}
              color="bg-secondary-100 text-secondary-800"
            >
              A simple secondary alert with
              <a href="#!" className="font-bold text-secondary-800 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-success-100 text-success-700">
              A simple success alert with
              <a href="#!" className="font-bold text-success-700 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-danger-100 text-danger-700">
              A simple danger alert with
              <a href="#!" className="font-bold text-danger-700 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-warning-100 text-warning-800">
              A simple warning alert with
              <a href="#!" className="font-bold text-warning-800 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-info-100 text-info-800">
              A simple indigo alert with
              <a href="#!" className="font-bold text-info-800 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-neutral-50 text-neutral-600">
              A simple light alert with
              <a href="#!" className="font-bold text-neutral-600 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-neutral-800 text-neutral-50">
              A simple dark alert with
              <a href="#!" className="font-bold text-neutral-50 ml-1">
                an example link
              </a>
              . Give it a click if you like.
            </TEAlert>
          </div>
        );
      }

Icons

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

        
            
      import React from "react";
      import { TEAlert } from "tw-elements-react";
      
      export default function Icons(): JSX.Element {
        return (
          <div>
            <TEAlert staticAlert open={true}>
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple primary alert—check it out!
            </TEAlert>
            <TEAlert
              staticAlert
              open={true}
              color="bg-secondary-100 text-secondary-800"
            >
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.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"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple secondary alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-success-100 text-success-700">
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple success alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-danger-100 text-danger-700">
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.72 6.97a.75.75 0 10-1.06 1.06L10.94 12l-1.72 1.72a.75.75 0 101.06 1.06L12 13.06l1.72 1.72a.75.75 0 101.06-1.06L13.06 12l1.72-1.72a.75.75 0 10-1.06-1.06L12 10.94l-1.72-1.72z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple danger alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-warning-100 text-warning-800">
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple warning alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-info-100 text-info-800">
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.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"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple indigo alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-neutral-50 text-neutral-600">
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="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
                    fillRule="evenodd"
                    d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-1.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"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple light alert—check it out!
            </TEAlert>
            <TEAlert staticAlert open={true} color="bg-neutral-800 text-neutral-50">
              <span className="mr-2">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                  className="h-5 w-5"
                >
                  <path
                    fillRule="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"
                    clipRule="evenodd"
                  />
                </svg>
              </span>
              A simple dark alert—check it out!
            </TEAlert>
          </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.

        
            
      import React from "react";
      import { TEAlert } from "tw-elements-react";
      
      export default function AdditionalContent(): JSX.Element {
        return (
          <TEAlert
            staticAlert
            open={true}
            className="!block"
            color="bg-success-100 text-success-700"
          >
            <h4 className="mb-2 text-2xl font-medium leading-tight">Well done!</h4>
            <p className="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 className="border-success-600 opacity-30" />
            <p className="mb-0 mt-4">
              Whenever you need to, be sure to use margin utilities to keep things
              nice and tidy.
            </p>
          </TEAlert>
        );
      }

Dismissing

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

        
            
      import React from "react";
      import { TEAlert } from "tw-elements-react";
      
      export default function DismissingExample(): JSX.Element {
        return (
          <div>
            <TEAlert
              dismiss
              staticAlert
              open={true}
              color="bg-warning-100 text-warning-800"
            >
              <strong>Holy guacamole!</strong>
              <span className="ml-1">
                You should check in on some of those fields below.
              </span>
            </TEAlert>
          </div>
        );
      }

Alert Trigger

You can open an alert by using the open prop.

        
            
      import React, { useState } from "react";
      import { TEAlert } from "tw-elements-react";
      
      export default function TriggerExample(): JSX.Element {
        const [open, setOpen] = useState(false);
      
        return (
          <div>
            <button
              type="button"
              className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
              onClick={() => setOpen(true)}
            >
              Open Alert
            </button>
      
            <TEAlert dismiss autohide delay={5000} open={open} setOpen={setOpen}>
              <strong>Holy guacamole!</strong>
              <span className="ml-1">
                You should check in on some of those fields below.
              </span>
            </TEAlert>
          </div>
        );
      }

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

Name	Type	Default	Description
`animation`	Boolean	`true`	Allows to animate appearing and disappearing of the alert.
`autohide`	Boolean	`false`	Alerts will hide automatically or not.
`color`	String	`"bg-primary-100 text-primary-800"`	Adds classes with colors to the alert component. Used to changed the colors.
`delay`	Number	`1000`	Sets the delay before hiding the alert. Used only when `autohide` is set to `true`.
`dismiss`	Boolean	`false`	Adds dismiss button to the alert.
`dismissTemplate`	React.ReactNode	`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="h-6 w-6" > <path fillRule="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" clipRule="evenodd" /> </svg>`	Changes the default dismiss button template. Used only when `dismiss` is set to `true`. Provide a React node to replace the default template.
`open`	Boolean	`false`	Changes the visibility of the alert.
`setOpen`	React.Dispatch< React.SetStateAction< boolean>>	`-`	Adds a `setState` method to keep the open state value in sync
`staticAlert`	Boolean	`false`	Makes the Alert static
`tag`	String	`"div"`	Changes the default tag of the alert component. By default it is a `div` element.
`theme`	Object	`{}`	Allows to change the Tailwind classes used in the component.

Name	Default	Description
`dismissButton`	w-[1em] focus:opacity-100 disabled:pointer-events-none disabled:select-none disabled:opacity-25	Styles the dismiss button of the alert.
`dismissButtonWrapper`	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	Styles the dismiss button wrapper of the alert.
`nonStatic`	fixed top-4 right-4	Sets classes for non-static alerts. Changes the position of the alert.
`static`	w-full	Sets classes for static alerts. Changes the width of the alert.
`wrapper`	inline-flex mb-3 items-center rounded-lg px-6 py-5 text-base	Styles the wrapper of the alert.
`wrapperHidden`	opacity-0	Sets classes for wrapper when alert is hidden. Changes the opacity of the alert.
`wrapperTransition`	transition duration-300 ease-in-out motion-reduce:transition-none	Defines the transition of the alert. Used only when `animation` is set to `true`.
`wrapperVisible`	opacity-100	Sets classes for wrapper when the alert is visible. Changes the opacity of the alert.

Name	Description
`onClose`	Fires when the alert is closed. Before the animation ends.
`onClosed`	Fires when the alert is closed. After the animation ends.

Alerts

Basic example

Link color

Icons

Additional content

Dismissing

Alert Trigger

Alerts - API

Import

Properties

TEAlert

Classes

Events

Alerts

Tailwind CSS React Alerts

Basic example

Link color

Icons

Additional content

Dismissing

Alert Trigger

Related resources

Tutorials:

Alerts - API

Import

Properties

TEAlert

Classes

Events