React Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible Material Tailwind alerts.


Simple Alert

lightBlue! This is a lightblue alert - check it out!
import React from "react";
import Alert from "@material-tailwind/react/Alert";

export default function Alert() {
    return (
        <Alert color="lightBlue">Material Tailwind Alerts</Alert>
    );
}
 

Closing Alert

lightBlue! This is a lightblue closing alert - check it out!
import React from "react";
import ClosingAlert from "@material-tailwind/react/ClosingAlert";

export default function ClosingAlert() {
    return (
        <ClosingAlert color="lightBlue">Material Tailwind Tailwind Closing Alerts</ClosingAlert>
    );
}