React Alerts

Leave your user the choice to close the feedback message using React.

Alert Examples

Alerts can have how many words you want, as well as an optional close button. For styling, use one of the color classes presented below. (e.g., .bg-red-500).

pink! This is a pink alert - check it out!

import React from "react";

const Alert = ({ color }) => {
  const [showAlert, setShowAlert] = React.useState(true);
  return (
    <>
      {showAlert ? (
        <div
          className={
            "text-white px-6 py-4 border-0 rounded relative mb-4 bg-" +
            color +
            "-500"
          }
        >
          <span className="text-xl inline-block mr-5 align-middle">
            <i className="fas fa-bell" />
          </span>
          <span className="inline-block align-middle mr-8">
            <b className="capitalize">{color}!</b> This is a {color} alert -
            check it out!
          </span>
          <button
            className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
            onClick={() => setShowAlert(false)}
          >
            <span>×</span>
          </button>
        </div>
      ) : null}
    </>
  );
};

export default function ClosingAlert() {
  return (
    <>
      return <Alert color="pink" />;
    </>
  );
}