Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
title description navigation related github prev next
Tailwind CSS Alert for React - Material Tailwind
Customise your web projects with our easy-to-use alert component for Tailwind CSS and React using Material Design guidelines.
alert
alert-variants
alert-colors
alert-with-icon
alert-dismissible
custom-alert-animation
props
theme
title route description
Props
props/alert
Learn more about props definition and types of alert component.
title route description
Theme
theme/alert
Learn how to customize the theme and styles for alert component.
alert
accordion
avatar

Tailwind CSS Alert - React

Get started on your web projects with our Tailwind CSS Alert which provides contextual feedback messages for typical user actions.

An Alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.

See below our simple Alert example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.


A simple alert for showing message.
import { Alert } from "@material-tailwind/react";

export default function Example() {
  return <Alert>A simple alert for showing message.</Alert>;
}

Alert Variants

The Alert component comes with 2 different variants that you can change it using the variant prop.

A simple filled alert for showing message. A simple gradient alert for showing message.
import { Alert } from "@material-tailwind/react";

export default function Variants() {
  return (
    <div className="flex flex-col gap-2">
      <Alert variant="filled">A simple filled alert for showing message.</Alert>
      <Alert variant="gradient">
        A simple gradient alert for showing message.
      </Alert>
    </div>
  );
}

Alert Colors

The Alert component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

An info alert for showing message. An error alert for showing message. A success alert for showing message. A warning alert for showing message.
import { Alert } from "@material-tailwind/react";

export default function Colors() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Alert color="blue">An info alert for showing message.</Alert>
      <Alert color="red">An error alert for showing message.</Alert>
      <Alert color="green">A success alert for showing message.</Alert>
      <Alert color="amber">A warning alert for showing message.</Alert>
    </div>
  );
}

Alert with Icon

You can add an icon at the beginning of Alert component using the icon prop.

} > {`A simple alert with icon for showing message.`}
import { Alert } from "@material-tailwind/react";

export default function Example() {
  return (
    <Alert
      icon={
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={2}
          stroke="currentColor"
          className="h-6 w-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
          />
        </svg>
      }
    >
      A simple alert with icon for showing message.
    </Alert>
  );
}

Alert Dismissible

The Alert component is a dismissible component that you can control it using the dismissible and show props.

<State initialState={{ show: true }}> {({ setState, show }) => ( <> {!show && ( <Button variant="gradient" className="absolute" onClick={() => setState((s) => ({ show: true }))} > Show Alert )} <Alert variant="gradient" show={show} dismissible={{ onClose: () => setState((s) => ({ show: false })), }} > A dismissible alert for showing message. </> )}

import { useState, Fragment } from "react";
import { Alert, Button } from "@material-tailwind/react";

export default function Colors() {
  const [show, setShow] = useState(true);

  return (
    <Fragment>
      {!show && (
        <Button
          variant="gradient"
          className="absolute"
          onClick={() => setShow(true)}
        >
          Show Alert
        </Button>
      )}
      <Alert
        show={show}
        dismissible={{
          onClose: () => setShow(false),
        }}
      >
        A dismissible alert for showing message.
      </Alert>
    </Fragment>
  );
}

Custom Alert Animation

You can modify the open/close state animation for Alert component using the animate prop.

<State initialState={{ show: true }}> {({ setState, show }) => ( <> {!show && ( <Button variant="gradient" className="absolute" onClick={() => setState((s) => ({ show: true }))} > Show Alert )} <Alert variant="gradient" show={show} animate={{ mount: { y: 0, }, unmount: { y: 100, }, }} dismissible={{ onClose: () => setState((s) => ({ show: false })), }} > A dismissible alert with custom animation. </> )}

import { useState, Fragment } from "react";
import { Alert, Button } from "@material-tailwind/react";

export default function Colors() {
  const [show, setShow] = useState(true);

  return (
    <Fragment>
      {!show && (
        <Button
          variant="gradient"
          className="absolute"
          onClick={() => setShow(true)}
        >
          Show Alert
        </Button>
      )}
      <Alert
        show={show}
        animate={{
          mount: { y: 0 },
          unmount: { y: 100 },
        }}
        dismissible={{
          onClose: () => setShow(false),
        }}
      >
        A dismissible alert with custom animation.
      </Alert>
    </Fragment>
  );
}