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.

Alert Variants

The Alert component comes with 3 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.

A simple outlined alert for showing message.

A simple ghost alert for showing message.

import { Alert } from "@material-tailwind/react";
 
export default function Example() {
  return (
    <div className="flex flex-col gap-2">
      <Alert>A simple filled alert for showing message.</Alert>
      <Alert color="red" variant="gradient">
        <span>A simple gradient alert for showing message.</span>
      </Alert>
      <Alert color="green" variant="outlined">
        <span>A simple outlined alert for showing message.</span>
      </Alert>
      <Alert color="orange" variant="ghost">
        <span>A simple ghost alert for showing message.</span>
      </Alert>
    </div>
  );
}

Alert Colors

The Alert component comes with 19 different colors that you can change it using the color prop.

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 Example() {
  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";
import { InformationCircleIcon } from "@heroicons/react/24/outline"
 
export default function Example() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Alert
        icon={
          <InformationCircleIcon
            strokeWidth={2}
            className="h-6 w-6"
          />
        }
      >
        A simple alert with icon for showing message
      </Alert>
      <Alert
        color="red"
        icon={
          <InformationCircleIcon
            strokeWidth={2}
            className="h-6 w-6"
          />
        }
      >
        A simple alert with icon for showing message
      </Alert>
      <Alert
        color="green"
        icon={
          <InformationCircleIcon
            strokeWidth={2}
            className="h-6 w-6"
          />
        }
      >
        A simple alert with icon for showing message
      </Alert>
      <Alert
        color="amber"
        icon={
          <InformationCircleIcon
            strokeWidth={2}
            className="h-6 w-6"
          />
        }
      >
        A simple alert with icon for showing message
      </Alert>
    </div>
  );
}

Alert with List

You can add any element you want for the Alert component, below is a example of alert with a list inside.

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

import { Alert } from "@material-tailwind/react";
import { InformationCircleIcon } from "@heroicons/react/24/outline"
import { InformationCircleIcon as InformationCircleIconSolid  } from "@heroicons/react/24/solid"
 
export default function Example() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Alert
        icon={
          <InformationCircleIcon
            strokeWidth={2}
            className="h-6 w-6"
          />
        }
      >
        <Typography className="font-medium">Ensure that these requirements are met:</Typography>
        <ul class="mt-2 ml-2 list-disc list-inside">
          <li>At least 10 characters (and up to 100 characters)</li>
          <li>At least one lowercase character</li>
          <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
        </ul>
      </Alert>
      <Alert
        variant="gradient"
        color="red"
        icon={
          <InformationCircleIcon
            strokeWidth={2}
            className="h-6 w-6"
          />
        }
      >
        <Typography className="font-medium">Ensure that these requirements are met:</Typography>
        <ul class="mt-2 ml-2 list-disc list-inside">
          <li>At least 10 characters (and up to 100 characters)</li>
          <li>At least one lowercase character</li>
          <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
        </ul>
      </Alert>
      <Alert
        variant="outlined"
        color="green"
        icon={
          <InformationCircleIconSolid className="h-6 w-6" />
        }
      >
        <Typography className="font-medium">Ensure that these requirements are met:</Typography>
        <ul class="mt-2 ml-2 list-disc list-inside">
          <li>At least 10 characters (and up to 100 characters)</li>
          <li>At least one lowercase character</li>
          <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
        </ul>
      </Alert>
      <Alert
        variant="ghost"
        color="orange"
        icon={
          <InformationCircleIconSolid className="h-6 w-6" />
        }
      >
        <Typography className="font-medium">Ensure that these requirements are met:</Typography>
        <ul class="mt-2 ml-2 list-disc list-inside">
          <li>At least 10 characters (and up to 100 characters)</li>
          <li>At least one lowercase character</li>
          <li>Inclusion of at least one special character, e.g., ! @ # ?</li>
        </ul>
      </Alert>
    </div>
  );
}

Alert Dismissible

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

A dismissible alert for showing message.

import { useState, Fragment } from "react";
import { Alert, Button } from "@material-tailwind/react";
 
export default function Example() {
  const [open, setOpen] = useState(true);
  
  return (
    <Fragment>
      {!open && (
        <Button className="absolute" onClick={() => setOpen(true)}>
          Show Alert
        </Button>
      )}
      <Alert open={open} onClose={() => setOpen(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.

A dismissible alert with custom animation.

import { useState, Fragment } from "react";
import { Alert, Button } from "@material-tailwind/react";
 
export default function Example() {
  const [open, setOpen] = useState(true);
 
  return (
    <Fragment>
      {!open && (
        <Button className="absolute" onClick={() => setOpen(true)}>
          Show Alert
        </Button>
      )}
      <Alert
        open={open}
        onClose={() => setOpen(false)}
        animate={{
          mount: { y: 0 },
          unmount: { y: 100 },
        }}
      >
        A dismissible alert with custom animation.
      </Alert>
    </Fragment>
  );
}

Custom Alert Close Icon

You can modify the close icon for Alert component using the dismissible prop.

Sorry, something went wrong please try again.

import React from "react";
import { Alert, Button } from "@material-tailwind/react";
import { ExclamationTriangleIcon } from "@heroicons/react/24/solid";
 
export default function Example() {
  const [open, setOpen] = React.useState(true);
 
  return (
    <React.Fragment>
      {!open && (
        <Button className="absolute" color="red" onClick={() => setOpen(true)}>
          Show Alert
        </Button>
      )}
      <Alert
        variant="gradient"
        color="red"
        open={open}
        icon={<SolidIcons.ExclamationTriangleIcon className="h-6 w-6" />}
        open={open}
        action={
          <Button
            variant="text"
            color="white"
            size="sm"
            className="!absolute top-3 right-3"
            onClick={() => setOpen(false)}
          >
            Close
          </Button>
        }
      >
        Sorry, something went wrong please try again.
      </Alert>
    </React.Fragment>
  );
}

Alert with Content

Use the example below to use Alert component with more content like title and description.

Success

I don't know what that word means. I'm happy. But success, that goes back to what in somebody's eyes success means. For me, success is inner peace. That's a good day for me.

import React from "react";
import { Alert, Button, Typography } from "@material-tailwind/react";
import { CheckCircleIcon } from "@heroicons/react/24/solid";
 
export default function Example() {
  const [open, setOpen] = React.useState(true);
 
  return (
    <React.Fragment>
      {!open && (
        <Button
          color="green"
          className="absolute"
          onClick={() => setOpen(true)}
        >
          Show Alert
        </Button>
      )}
      <Alert
        open={open}
        color="green"
        className="max-w-screen-md"
        icon={<CheckCircleIcon className="mt-px h-6 w-6" />}
        onClose={() => setOpen(false)}
      >
        <Typography variant="h5" color="white">
          Success
        </Typography>
        <Typography color="white" className="mt-2 font-normal">
          I don&apos;t know what that word means. I&apos;m happy. But success,
          that goes back to what in somebody&apos;s eyes success means. For me,
          success is inner peace. That&apos;s a good day for me.
        </Typography>
      </Alert>
    </React.Fragment>
  );
}

Props

Learn more about props definition and types of alert component.

Theme

Learn how to customize the theme and styles for alert component.

accordion

avatar

Edit this page on Github

Tailwind CSS Alert - React

Alert Variants

Alert Colors

Alert with Icon

Alert with List

Alert Dismissible

Custom Alert Animation

Custom Alert Close Icon

Alert with Content

Success

Related

Props

Theme