Alerts

Alerts are a way to display important information to the user. They are typically used to give feedback to the user about an action that has been completed or an error that has occurred. It can also be used to warn or provide important extra information to the user before an action is taken.

Design Hints

While, alerts are a great way to provide feedback to the user, it is important to ensure that they are used appropriately and sparingly. Too many alerts can be overwhelming and distracting to the user. The less alerts the user sees, the more likely they are to pay attention to the alert.

Accessiblity Hints

The role alert is used only for information that requires a user's immediate attention. Remember, this is a very intrusive role and should be used sparingly. The alert should contain all the information required to understand the issue in textual form. If using an icon without a text to convey alert type, ensure that the icon is hidden from screen readers using aria-hidden and use an sr-only class text to convey the alert type which is only visible to screen readers.

Alerts Specification

An alert contains two main parts :

The alert container : The container that holds the alert message and any additional content. This container should have a role of alert if immediate user attention is required.
The alert message : The message that is displayed in the alert container. This message should be informative and provide the user with a clear understanding of the issue or action that needs to be taken.

Colors enhance alert messages but should complement, not replace, clear textual information that conveys the alert’s primary content.

To know more you can refer to MDN documentation for the aria role=alert .

Simple Alerts

Different types of alerts are given below. Note that the last alert doesn’t have an alert role and instead uses a note role, but can be used to convey important information without interrupting the user experience.

Information : This is an informational alert to notify users about important updates or changes.

Success : Congratulations! Your action was completed successfully.

Warning : Please proceed with caution. There are potential risks associated with this action.

Error : An error occurred while processing your request. Please try again later.

Note : Earlier versions of the software may not support this.

<div
  role="alert"
  class="my-2 rounded-lg bg-blue-200 p-4 text-base text-blue-950 dark:bg-blue-950 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Information : </span> This is an informational
  alert to notify users about important updates or changes.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-green-200 p-4 text-base text-green-950 dark:bg-green-950 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Success : </span> Congratulations!
  Your action was completed successfully.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-yellow-200 p-4 text-base text-black dark:bg-yellow-700/50 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Warning : </span> Please proceed with
  caution. There are potential risks associated with this action.
</div>
<div
  role="alert"
  class="my-2 rounded-lg bg-red-300 p-4 text-base text-black dark:bg-red-950 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Error : </span> An error occurred
  while processing your request. Please try again later.
</div>
<div
  role="note"
  class="my-2 rounded-lg bg-indigo-200 p-4 text-base text-indigo-950 dark:bg-indigo-950/80 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Note : </span> Earlier versions of
  the software may not support this.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-blue-200 p-4 text-base text-blue-950 dark:bg-blue-950 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Information : </span> This is an informational
  alert to notify users about important updates or changes.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-green-200 p-4 text-base text-green-950 dark:bg-green-950 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Success : </span> Congratulations!
  Your action was completed successfully.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-yellow-200 p-4 text-base text-black dark:bg-yellow-700/50 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Warning : </span> Please proceed with
  caution. There are potential risks associated with this action.
</div>
<div
  role="alert"
  class="my-2 rounded-lg bg-red-300 p-4 text-base text-black dark:bg-red-950 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Error : </span> An error occurred
  while processing your request. Please try again later.
</div>
<div
  role="note"
  class="my-2 rounded-lg bg-indigo-200 p-4 text-base text-indigo-950 dark:bg-indigo-950/80 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Note : </span> Earlier versions of
  the software may not support this.
</div>

Alternate Simple Alerts

A different style for simple alerts

Information : This is an informational alert to notify users about important updates or changes.

Success : Congratulations! Your action was completed successfully.

Warning : Please proceed with caution. There are potential risks associated with this action.

Error : An error occurred while processing your request. Please try again later.

Note : Earlier versions of the software may not support this.

<div
  role="alert"
  class="my-2 rounded-lg border border-blue-600 bg-blue-50 p-4 text-base text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100"
>
  <span class="text-base font-bold md:text-lg">Information : </span> This is an informational
  alert to notify users about important updates or changes.
</div>

<div
  role="alert"
  class="my-2 rounded-lg border border-green-600 bg-green-50 p-4 text-base text-green-900 dark:border-green-800 dark:bg-green-950/30 dark:text-green-100"
>
  <span class="text-base font-bold md:text-lg">Success : </span> Congratulations!
  Your action was completed successfully.
</div>

<div
  role="alert"
  class="my-2 rounded-lg border border-yellow-600 bg-yellow-100 p-4 text-base text-black dark:border-yellow-500 dark:bg-yellow-700/30 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Warning : </span> Please proceed with
  caution. There are potential risks associated with this action.
</div>
<div
  role="alert"
  class="my-2 rounded-lg border border-red-600 bg-red-100 p-4 text-base text-black dark:border-red-500 dark:bg-red-700/30 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Error : </span> An error occurred
  while processing your request. Please try again later.
</div>
<div
  role="note"
  class="my-2 rounded-lg border border-indigo-600 p-4 text-base text-indigo-800 dark:border-indigo-900 dark:text-indigo-300"
>
  <span class="text-base font-bold md:text-lg">Note : </span> Earlier versions of
  the software may not support this.
</div>

<div
  role="alert"
  class="my-2 rounded-lg border border-blue-600 bg-blue-50 p-4 text-base text-blue-900 dark:border-blue-800 dark:bg-blue-950/30 dark:text-blue-100"
>
  <span class="text-base font-bold md:text-lg">Information : </span> This is an informational
  alert to notify users about important updates or changes.
</div>

<div
  role="alert"
  class="my-2 rounded-lg border border-green-600 bg-green-50 p-4 text-base text-green-900 dark:border-green-800 dark:bg-green-950/30 dark:text-green-100"
>
  <span class="text-base font-bold md:text-lg">Success : </span> Congratulations!
  Your action was completed successfully.
</div>

<div
  role="alert"
  class="my-2 rounded-lg border border-yellow-600 bg-yellow-100 p-4 text-base text-black dark:border-yellow-500 dark:bg-yellow-700/30 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Warning : </span> Please proceed with
  caution. There are potential risks associated with this action.
</div>
<div
  role="alert"
  class="my-2 rounded-lg border border-red-600 bg-red-100 p-4 text-base text-black dark:border-red-500 dark:bg-red-700/30 dark:text-white"
>
  <span class="text-base font-bold md:text-lg">Error : </span> An error occurred
  while processing your request. Please try again later.
</div>
<div
  role="note"
  class="my-2 rounded-lg border border-indigo-600 p-4 text-base text-indigo-800 dark:border-indigo-900 dark:text-indigo-300"
>
  <span class="text-base font-bold md:text-lg">Note : </span> Earlier versions of
  the software may not support this.
</div>

Alerts with Icons

A variant of alerts which uses as icon to convey the type of alert. The icon is accompanied with a label for screen readers to convey the same information.

This is an informational alert to notify users about important updates or changes.

Congratulations! Your action was completed successfully.

Please proceed with caution. There are potential risks associated with this action.

An error occurred while processing your request. Please try again later.

Earlier versions of the software may not support this.

<div
  class="my-2 rounded-lg bg-blue-200 p-4 text-base text-blue-950 dark:bg-blue-950 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-blue-800 dark:text-blue-300"
    >
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
      ></path>
    </svg>
    <span class="sr-only">Information : </span>
    This is an informational alert to notify users about important updates or changes.
  </div>
</div>

<div
  class="my-2 rounded-lg bg-green-200 p-4 text-base text-green-950 dark:bg-green-950 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-green-800 dark:text-green-300"
    >
      <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4z"
      ></path>
    </svg>
    <span class="sr-only">Success :</span>
    Congratulations! Your action was completed successfully.
  </div>
</div>

<div
  class="my-2 rounded-lg bg-yellow-200 p-4 text-base text-black dark:bg-yellow-700/50 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-yellow-600 dark:text-yellow-300"
    >
      <path fill="currentColor" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
      ></path>
    </svg>
    <span class="sr-only">Warning :</span>
    Please proceed with caution. There are potential risks associated with this action.
  </div>
</div>
<div
  class="my-2 rounded-lg bg-red-300 p-4 text-base text-black dark:bg-red-950 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-red-800 dark:text-red-300"
    >
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
      ></path>
    </svg>
    <span class="sr-only">Error :</span>
    An error occurred while processing your request. Please try again later.
  </div>
</div>
<div
  class="my-2 rounded-lg bg-indigo-200 p-4 text-base text-indigo-950 dark:bg-indigo-950/80 dark:text-white"
>
  <div class="flex flex-row items-center" role="note">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-indigo-800 dark:text-indigo-300"
    >
      <path
        fill="currentColor"
        d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75s-.75-.34-.75-.75s.34-.75.75-.75M9.1 17H7v-2.14l5.96-5.96l2.12 2.12zm7.75-7.73l-1.06 1.06l-2.12-2.12l1.06-1.06c.2-.2.51-.2.71 0l1.41 1.41c.2.2.2.51 0 .71"
      ></path>
    </svg>
    <span class="sr-only">Note :</span>
    Earlier versions of the software may not support this.
  </div>
</div>

<div
  class="my-2 rounded-lg bg-blue-200 p-4 text-base text-blue-950 dark:bg-blue-950 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-blue-800 dark:text-blue-300"
    >
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
      ></path>
    </svg>
    <span class="sr-only">Information : </span>
    This is an informational alert to notify users about important updates or changes.
  </div>
</div>

<div
  class="my-2 rounded-lg bg-green-200 p-4 text-base text-green-950 dark:bg-green-950 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-green-800 dark:text-green-300"
    >
      <path fill="currentColor" d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4z"
      ></path>
    </svg>
    <span class="sr-only">Success :</span>
    Congratulations! Your action was completed successfully.
  </div>
</div>

<div
  class="my-2 rounded-lg bg-yellow-200 p-4 text-base text-black dark:bg-yellow-700/50 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-yellow-600 dark:text-yellow-300"
    >
      <path fill="currentColor" d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
      ></path>
    </svg>
    <span class="sr-only">Warning :</span>
    Please proceed with caution. There are potential risks associated with this action.
  </div>
</div>
<div
  class="my-2 rounded-lg bg-red-300 p-4 text-base text-black dark:bg-red-950 dark:text-white"
>
  <div class="flex flex-row items-center" role="alert">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-red-800 dark:text-red-300"
    >
      <path
        fill="currentColor"
        d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
      ></path>
    </svg>
    <span class="sr-only">Error :</span>
    An error occurred while processing your request. Please try again later.
  </div>
</div>
<div
  class="my-2 rounded-lg bg-indigo-200 p-4 text-base text-indigo-950 dark:bg-indigo-950/80 dark:text-white"
>
  <div class="flex flex-row items-center" role="note">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      aria-hidden="true"
      class="mr-3 shrink-0 text-indigo-800 dark:text-indigo-300"
    >
      <path
        fill="currentColor"
        d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75s-.75-.34-.75-.75s.34-.75.75-.75M9.1 17H7v-2.14l5.96-5.96l2.12 2.12zm7.75-7.73l-1.06 1.06l-2.12-2.12l1.06-1.06c.2-.2.51-.2.71 0l1.41 1.41c.2.2.2.51 0 .71"
      ></path>
    </svg>
    <span class="sr-only">Note :</span>
    Earlier versions of the software may not support this.
  </div>
</div>

Note: The alerts above use aria-hidden="true" to hide the icons from screen readers and a <span class="sr-only"> to provide the text which is only visible to screen readers.

Prominent Alerts

These alerts are designed in a way to be visually prominent and grab the user’s attention immediately. These only represent a higher visual prominence, not a higher semantic prominence with respect to accessibility compared to the alerts above.

Information : This is an informational alert to notify users about important updates or changes.

Success : Congratulations! Your action was completed successfully.

Warning : Please proceed with caution. There are potential risks associated with this action.

Error : An error occurred while processing your request. Please try again later.

<div
  role="alert"
  class="my-2 rounded-lg bg-blue-800 p-4 text-base text-white dark:bg-blue-900"
>
  <span class="text-base font-bold md:text-lg">Information : </span> This is an informational
  alert to notify users about important updates or changes.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-green-800 p-4 text-base text-white dark:bg-green-900"
>
  <span class="text-base font-bold md:text-lg">Success : </span> Congratulations!
  Your action was completed successfully.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-yellow-400 p-4 text-base text-black dark:bg-yellow-500"
>
  <span class="text-base font-bold md:text-lg">Warning : </span> Please proceed with
  caution. There are potential risks associated with this action.
</div>
<div
  role="alert"
  class="my-2 rounded-lg bg-red-800 p-4 text-base text-white dark:bg-red-900"
>
  <span class="text-base font-bold md:text-lg">Error : </span> An error occurred
  while processing your request. Please try again later.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-blue-800 p-4 text-base text-white dark:bg-blue-900"
>
  <span class="text-base font-bold md:text-lg">Information : </span> This is an informational
  alert to notify users about important updates or changes.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-green-800 p-4 text-base text-white dark:bg-green-900"
>
  <span class="text-base font-bold md:text-lg">Success : </span> Congratulations!
  Your action was completed successfully.
</div>

<div
  role="alert"
  class="my-2 rounded-lg bg-yellow-400 p-4 text-base text-black dark:bg-yellow-500"
>
  <span class="text-base font-bold md:text-lg">Warning : </span> Please proceed with
  caution. There are potential risks associated with this action.
</div>
<div
  role="alert"
  class="my-2 rounded-lg bg-red-800 p-4 text-base text-white dark:bg-red-900"
>
  <span class="text-base font-bold md:text-lg">Error : </span> An error occurred
  while processing your request. Please try again later.
</div>

Astrojs Component

Requires Astrojs to work.

This is a one off astrojs component for all the alerts above. Currently alternate style for simple alerts is not implemented in this component.

Congratulations! Your action was completed successfully.

---
interface Props {
  type: string;
  message: string;
  showIcon: boolean;
  prominent: boolean;
}

const { type, message, showIcon, prominent } = Astro.props;
---

<div
  class={` my-2 text-base  rounded-lg p-4
    ${type === "info" ? `${prominent ? "bg-blue-800 dark:bg-blue-900 text-white " : "bg-blue-200 dark:bg-blue-950 text-blue-950 dark:text-white"}` : ""}
    ${type === "success" ? `${prominent ? "bg-green-800 dark:bg-green-900 text-white " : "bg-green-200 dark:bg-green-950 text-green-950 dark:text-white"}` : ""}
    ${type === "warning" ? `${prominent ? "bg-yellow-400 dark:bg-yellow-500 text-black " : "bg-yellow-200 dark:bg-yellow-700/50 text-black dark:text-white"}` : ""}
    ${type === "error" ? `${prominent ? "bg-red-800 dark:bg-red-900 text-white " : "bg-red-300 dark:bg-red-950 text-black dark:text-white"}` : ""}
    ${["info", "success", "warning", "error"].includes(type) ? "" : "bg-indigo-200 dark:bg-indigo-950/80 text-indigo-950 dark:text-white"}
        `}
  role={["info", "success", "warning", "error"].includes(type)
    ? "alert"
    : "note"}
>
  <div class="flex flex-row items-center">
    {
      showIcon && type === "info" && (
        <>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            aria-hidden="true"
            class={`mr-3 shrink-0 ${prominent ? "text-white" : "text-blue-800 dark:text-blue-300"}`}
          >
            <path
              fill="currentColor"
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z"
            />
          </svg>
          <span class="sr-only">Information :</span>
        </>
      )
    }
    {
      showIcon && type === "success" && (
        <>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            aria-hidden="true"
            class={`mr-3 shrink-0 ${prominent ? "text-white" : "text-green-800 dark:text-green-300"}`}
          >
            <path
              fill="currentColor"
              d="M9 16.2L4.8 12l-1.4 1.4L9 19L21 7l-1.4-1.4z"
            />
          </svg>
          <span class="sr-only">Success :</span>
        </>
      )
    }
    {
      showIcon && type === "warning" && (
        <>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            aria-hidden="true"
            class={`mr-3 shrink-0 ${prominent ? "text-black" : "text-yellow-600 dark:text-yellow-300"}`}
          >
            <path
              fill="currentColor"
              d="M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
            />
          </svg>
          <span class="sr-only">Warning :</span>
        </>
      )
    }
    {
      showIcon && type === "error" && (
        <>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            aria-hidden="true"
            class={`mr-3 shrink-0 ${prominent ? "text-white" : "text-red-800 dark:text-red-300"}`}
          >
            <path
              fill="currentColor"
              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m1 15h-2v-2h2zm0-4h-2V7h2z"
            />
          </svg>
          <span class="sr-only">Error :</span>
        </>
      )
    }
    {
      showIcon && !["info", "success", "warning", "error"].includes(type) && (
        <>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            aria-hidden="true"
            class="mr-3 shrink-0 text-indigo-800 dark:text-indigo-300"
          >
            <path
              fill="currentColor"
              d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75s-.75-.34-.75-.75s.34-.75.75-.75M9.1 17H7v-2.14l5.96-5.96l2.12 2.12zm7.75-7.73l-1.06 1.06l-2.12-2.12l1.06-1.06c.2-.2.51-.2.71 0l1.41 1.41c.2.2.2.51 0 .71"
            />
          </svg>
          <span class="sr-only">{type} :</span>
        </>
      )
    }
    {
      !showIcon && (
        <span
          class={`text-base font-bold md:text-lg ${prominent ? "text-white" : ""}`}
        >
          {type.charAt(0).toUpperCase() + type.slice(1)} : &nbsp;
        </span>
      )
    }
    {message}
  </div>
</div>

Usage

To call the alerts component in your astro project, follow these steps below after copying the code into a component file:

Import the component from the correct location in your project.
Call the component with the required props.

Example implementation is given below:

---
import Alerts from "./Alerts.astro"; // import the component from the correct location in your project
---

<Alerts
  type="success"
  message="Congratulations! Your action was completed successfully."
  showIcon={true}
  prominent={true}
/>

Component Props

The component accepts the following props which are all required:

Prop	Type	Description
`type`	`string`	Specifies the type of the alert. Possible values: ‘info’, ‘success’, ‘warning’, ‘error’ which sets the aria role alert. If no type is specified or another value is given, the type defaults to ‘note’ and aria role is set to ‘note’.
`message`	`string`	The message content to be displayed in the alert.
`showIcon`	`boolean`	Determines whether to display an icon corresponding to the alert type.
`prominent`	`boolean`	Indicates if the alert should have a prominent style. There is only visual changes and no semantic changes for the alert.

Styling

The component uses Tailwind CSS classes for styling. The alert container has a rounded shape with padding and margin. The background color and text color of the alert vary based on the type and prominent props. If prominent is true and the type is not one of the four allowed types, it will have no effect.

Accessibility:

The alert container has a role attribute set to ‘alert’ for all defined types and set to ‘note’ for values which are outside the defined types. The aria-label attribute is set to the value of the type prop to provide an accessible name for the alert.

Icon Display:

If showIcon is true, an SVG icon corresponding to the alert type is displayed. The icon is positioned to the left of the message content. The icon color varies based on the type and prominent props.

Message Display:

If showIcon is false, the alert type is displayed as a bold text prefix to the message. The message content is displayed after the icon or type prefix.

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Alerts	Yes	Yes	Yes	Yes	Yes
Alternate Simple Alerts	Yes	Yes	Yes	Yes	Yes
Alerts with Icons	Yes	Yes	Yes	Yes	Yes
Prominent Alerts	Yes	Yes	Yes	Yes	Yes
Astrojs Component	Yes	Yes	Yes	Yes	Yes

The alerts adhere to the WAI-ARIA 1.2 specification for alert patterns.

Additional manual testing maybe required to ensure the alerts are accessible in your specific use case.