Skip to content

Latest commit

 

History

History
1013 lines (921 loc) · 27.4 KB

File metadata and controls

1013 lines (921 loc) · 27.4 KB
title description navigation 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-icon
alert-with-list
alert-dismissible
alert-custom-animation
alert-custom-close-icon
alert-with-content
alert-custom-styles
alert-props
types-variant
types-color
types-animate
alert-theme
alert-theme-object-type
alert-theme-customization
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.


<CodePreview link="alert#alert" component={<AlertExamples.AlertDefault />}>

import { Alert } from "@material-tailwind/react";

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

## Alert Variants

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

<CodePreview link="alert#alert-variants" component={<AlertExamples.AlertVariants />}>

import { Alert } from "@material-tailwind/react";

export function AlertVariants() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Alert>A simple filled alert for showing message.</Alert>
      <Alert variant="gradient">
        <span>A simple gradient alert for showing message.</span>
      </Alert>
      <Alert variant="outlined">
        <span>A simple outlined alert for showing message.</span>
      </Alert>
      <Alert 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.

<CodePreview link="alert#alert-colors" component={<AlertExamples.AlertColors />}>

import { Alert } from "@material-tailwind/react";

export function AlertColors() {
  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 Icon

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

<CodePreview link="alert#alert-icon" component={<AlertExamples.AlertIcon />}>

import { Alert } from "@material-tailwind/react";

function Icon() {
  return (
    <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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
      />
    </svg>
  );
}

export function AlertIcon() {
  return (
    <Alert icon={<Icon />}>A simple alert with icon for showing message</Alert>
  );
}

## Alert with List

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

<CodePreview component={<AlertExamples.AlertWithList />}>

import { Alert, Typography } from "@material-tailwind/react";

function IconOutlined() {
  return (
    <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="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"
      />
    </svg>
  );
}

function IconSolid() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-6 w-6"
    >
      <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>
  );
}

export function AlertWithList() {
  return (
    <div className="flex w-full flex-col gap-2">
      <Alert icon={<IconOutlined />}>
        <Typography className="font-medium">
          Ensure that these requirements are met:
        </Typography>
        <ul className="mt-2 ml-2 list-inside list-disc">
          <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" icon={<IconOutlined />}>
        <Typography className="font-medium">
          Ensure that these requirements are met:
        </Typography>
        <ul className="mt-2 ml-2 list-inside list-disc">
          <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" icon={<IconSolid />}>
        <Typography className="font-medium">
          Ensure that these requirements are met:
        </Typography>
        <ul className="mt-2 ml-2 list-inside list-disc">
          <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" icon={<IconSolid />}>
        <Typography className="font-medium">
          Ensure that these requirements are met:
        </Typography>
        <ul className="mt-2 ml-2 list-inside list-disc">
          <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.

<CodePreview link="alert#alert-dismissible" component={<AlertExamples.AlertDismissible />}>

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

export function AlertDismissible() {
  const [open, setOpen] = React.useState(true);

  return (
    <>
      {!open && (
        <Button className="absolute" onClick={() => setOpen(true)}>
          Show Alert
        </Button>
      )}
      <Alert open={open} onClose={() => setOpen(false)}>
        A dismissible alert for showing message.
      </Alert>
    </>
  );
}

## Alert Custom Animation

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

<CodePreview component={<AlertExamples.AlertCustomAnimation />}>

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

export function AlertCustomAnimation() {
  const [open, setOpen] = React.useState(true);

  return (
    <>
      {!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>
    </>
  );
}

## Alert Custom Close Icon

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

<CodePreview link="alert#alert-custom-close-icon" component={<AlertExamples.AlertCustomCloseIcon />}>

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

function Icon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-6 w-6"
    >
      <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>
  );
}

export default function AlertCustomCloseIcon() {
  const [open, setOpen] = React.useState(true);

  return (
    <>
      {!open && (
        <Button className="absolute" onClick={() => setOpen(true)}>
          Show Alert
        </Button>
      )}
      <Alert
        variant="gradient"
        open={open}
        icon={<Icon />}
        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>
    </>
  );
}

## Alert with Content

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

<CodePreview link="alert#alert-with-content" className="mt-4" component={<AlertExamples.AlertWithContent />}>

import React from "react";
import { Alert, Button, Typography } from "@material-tailwind/react";

function Icon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-6 w-6"
    >
      <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>
  );
}

export function AlertWithContent() {
  const [open, setOpen] = React.useState(true);

  return (
    <>
      {!open && (
        <Button
          className="absolute"
          onClick={() => setOpen(true)}
        >
          Show Alert
        </Button>
      )}
      <Alert
        open={open}
        className="max-w-screen-md"
        icon={<Icon />}
        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>
    </>
  );
}

## Alert Custom Styles

You can use the className prop to add custom styles to the Alert component.

<CodePreview component={<AlertExamples.AlertCustomStyles />}>

import { Alert } from "@material-tailwind/react";

function Icon() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="currentColor"
      className="h-6 w-6"
    >
      <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>
  );
}

export function AlertCustomStyles() {
  return (
    <Alert
      icon={<Icon />}
      className="rounded-none border-l-4 border-[#2ec946] bg-[#2ec946]/10 font-medium text-[#2ec946]"
    >
      A simple alert for showing message.
    </Alert>
  );
}

## Alert Props

The following props are available for button component. These are the custom props that we've added for the alert component and you can use all the other native props as well.

Attribute Type Description Default
variant Variant Change alert variant filled
color Color Change alert color gray
onClose func Callback for closing the alert component undefined
action node Change the onClose action button undefined
animate Animate Change alert animation undefined
open boolean Change alert visibility true
icon node Add icon at the beginning of alert undefined
className string Add custom className for alert ''
children node Add content for alert No default value it's a required prop.


For TypeScript Only

import type { AlertProps } from "@material-tailwind/react";

## Types - Variant
type variant = "filled" | "gradient" | "outlined" | "ghost";

## Types - Color
type color =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

## Types - Animate
type animate = {
  mount?: object;
  unmount?: object;
};

## Alert Theme

Learn how to customize the theme and styles for alert component, the theme object for alert component has three main objects:

A. The defaultProps object for setting up the default value for props of alert component.
B. The valid object for customizing the valid values for alert component props.
C. The styles object for customizing the theme and styles of alert component.

You can customize the theme and styles of alert component by adding Tailwind CSS classes as key paired values for objects.



## Alert Theme Object Type
interface AlertStylesType {
  defaultProps: {
    variant: string;
    color: string;
    icon: node;
    open: boolean;
    action: node;
    onClose: func;
    animate: {
      mount: object;
      unmount: object;
    };
    className: string;
  };
  valid: {
    variants: string[];
    colors: string[];
  };
  styles: {
    base: {
      alert: object;
      action: object;
    };
    variants: {
      filled: object;
      gradient: object;
      outlined: object;
      ghost: object;
    };
  };
}


For TypeScript Only

import { AlertStylesType } from "@material-tailwind/react";

## Alert Theme Customization
const theme = {
  alert: {
    defaultProps: {
      variant: "filled",
      color: "blue",
      icon: undefined,
      open: true,
      action: undefined,
      onClose: undefined,
      animate: {
        unmount: {},
        mount: {},
      },
      className: "",
    },
    valid: {
      variants: ["filled", "gradient", "outlined", "ghost"],
      colors: [
        "blue-gray",
        "gray",
        "brown",
        "deep-orange",
        "orange",
        "amber",
        "yellow",
        "lime",
        "light-green",
        "green",
        "teal",
        "cyan",
        "light-blue",
        "blue",
        "indigo",
        "deep-purple",
        "purple",
        "pink",
        "red",
      ],
    },
    styles: {
      base: {
        alert: {
          position: "relative",
          display: "block",
          width: "w-full",
          fontFamily: "font-sans",
          fontSize: "text-base",
          fontWeight: "font-regular",
          px: "px-4",
          py: "py-4",
          borderRadius: "rounded-lg",
        },
        action: {
          position: "!absolute",
          top: "top-3",
          right: "right-3",
        },
      },
      variants: {
        filled: {
          "blue-gray": {
            backgroud: "bg-blue-gray-500",
            color: "text-white",
          },
          gray: {
            backgroud: "bg-gray-500",
            color: "text-white",
          },
          brown: {
            backgroud: "bg-brown-500",
            color: "text-white",
          },
          "deep-orange": {
            backgroud: "bg-deep-orange-500",
            color: "text-white",
          },
          orange: {
            backgroud: "bg-orange-500",
            color: "text-white",
          },
          amber: {
            backgroud: "bg-amber-500",
            color: "text-black",
          },
          yellow: {
            backgroud: "bg-yellow-500",
            color: "text-black",
          },
          lime: {
            backgroud: "bg-lime-500",
            color: "text-black",
          },
          "light-green": {
            backgroud: "bg-light-green-500",
            color: "text-white",
          },
          green: {
            backgroud: "bg-green-500",
            color: "text-white",
          },
          teal: {
            backgroud: "bg-teal-500",
            color: "text-white",
          },
          cyan: {
            backgroud: "bg-cyan-500",
            color: "text-white",
          },
          "light-blue": {
            backgroud: "bg-light-blue-500",
            color: "text-white",
          },
          blue: {
            backgroud: "bg-blue-500",
            color: "text-white",
          },
          indigo: {
            backgroud: "bg-indigo-500",
            color: "text-white",
          },
          "deep-purple": {
            backgroud: "bg-deep-purple-500",
            color: "text-white",
          },
          purple: {
            backgroud: "bg-purple-500",
            color: "text-white",
          },
          pink: {
            backgroud: "bg-pink-500",
            color: "text-white",
          },
          red: {
            backgroud: "bg-red-500",
            color: "text-white",
          },
        },
        gradient: {
          "blue-gray": {
            backgroud: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
            color: "text-white",
          },
          gray: {
            backgroud: "bg-gradient-to-tr from-gray-600 to-gray-400",
            color: "text-white",
          },
          brown: {
            backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400",
            color: "text-white",
          },
          "deep-orange": {
            backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400",
            color: "text-white",
          },
          orange: {
            backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400",
            color: "text-white",
          },
          amber: {
            backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400",
            color: "text-black",
          },
          yellow: {
            backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400",
            color: "text-black",
          },
          lime: {
            backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400",
            color: "text-black",
          },
          "light-green": {
            backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400",
            color: "text-white",
          },
          green: {
            backgroud: "bg-gradient-to-tr from-green-600 to-green-400",
            color: "text-white",
          },
          teal: {
            backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400",
            color: "text-white",
          },
          cyan: {
            backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400",
            color: "text-white",
          },
          "light-blue": {
            backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400",
            color: "text-white",
          },
          blue: {
            backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
            color: "text-white",
          },
          indigo: {
            backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400",
            color: "text-white",
          },
          "deep-purple": {
            backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400",
            color: "text-white",
          },
          purple: {
            backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400",
            color: "text-white",
          },
          pink: {
            backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400",
            color: "text-white",
          },
          red: {
            backgroud: "bg-gradient-to-tr from-red-600 to-red-400",
            color: "text-white",
          },
        },
        outlined: {
          "blue-gray": {
            border: "border border-blue-gray-500",
            color: "text-blue-gray-700",
          },
          gray: {
            border: "border border-gray-500",
            color: "text-gray-700",
          },
          brown: {
            border: "border border-brown-500",
            color: "text-brown-700",
          },
          "deep-orange": {
            border: "border border-deep-orange-500",
            color: "text-deep-orange-700",
          },
          orange: {
            border: "border border-orange-500",
            color: "text-orange-700",
          },
          amber: {
            border: "border border-amber-500",
            color: "text-amber-700",
          },
          yellow: {
            border: "border border-yellow-500",
            color: "text-yellow-700",
          },
          lime: {
            border: "border border-lime-500",
            color: "text-lime-700",
          },
          "light-green": {
            border: "border border-light-green-500",
            color: "text-light-green-700",
          },
          green: {
            border: "border border-green-500",
            color: "text-green-700",
          },
          teal: {
            border: "border border-teal-500",
            color: "text-teal-700",
          },
          cyan: {
            border: "border border-cyan-500",
            color: "text-cyan-700",
          },
          "light-blue": {
            border: "border border-light-blue-500",
            color: "text-light-blue-700",
          },
          blue: {
            border: "border border-blue-500",
            color: "text-blue-700",
          },
          indigo: {
            border: "border border-indigo-500",
            color: "text-indigo-700",
          },
          "deep-purple": {
            border: "border border-deep-purple-500",
            color: "text-deep-purple-700",
          },
          purple: {
            border: "border border-purple-500",
            color: "text-purple-700",
          },
          pink: {
            border: "border border-pink-500",
            color: "text-pink-700",
          },
          red: {
            border: "border border-red-500",
            color: "text-red-700",
          },
        },
        ghost: {
          "blue-gray": {
            backgroud: "bg-blue-gray-500/20",
            color: "text-blue-gray-900",
          },
          gray: {
            backgroud: "bg-gray-500/20",
            color: "text-gray-900",
          },
          brown: {
            backgroud: "bg-brown-500/20",
            color: "text-brown-900",
          },
          "deep-orange": {
            backgroud: "bg-deep-orange-500/20",
            color: "text-deep-orange-900",
          },
          orange: {
            backgroud: "bg-orange-500/20",
            color: "text-orange-900",
          },
          amber: {
            backgroud: "bg-amber-500/20",
            color: "text-amber-900",
          },
          yellow: {
            backgroud: "bg-yellow-500/20",
            color: "text-yellow-900",
          },
          lime: {
            backgroud: "bg-lime-500/20",
            color: "text-lime-900",
          },
          "light-green": {
            backgroud: "bg-light-green-500/20",
            color: "text-light-green-900",
          },
          green: {
            backgroud: "bg-green-500/20",
            color: "text-green-900",
          },
          teal: {
            backgroud: "bg-teal-500/20",
            color: "text-teal-900",
          },
          cyan: {
            backgroud: "bg-cyan-500/20",
            color: "text-cyan-900",
          },
          "light-blue": {
            backgroud: "bg-light-blue-500/20",
            color: "text-light-blue-900",
          },
          blue: {
            backgroud: "bg-blue-500/20",
            color: "text-blue-900",
          },
          indigo: {
            backgroud: "bg-indigo-500/20",
            color: "text-indigo-900",
          },
          "deep-purple": {
            backgroud: "bg-deep-purple-500/20",
            color: "text-deep-purple-900",
          },
          purple: {
            backgroud: "bg-purple-500/20",
            color: "text-purple-900",
          },
          pink: {
            backgroud: "bg-pink-500/20",
            color: "text-pink-900",
          },
          red: {
            backgroud: "bg-red-500/20",
            color: "text-red-900",
          },
        },
      },
    },
  },
};