Alerts

Overview

Alert gives you informative value mostly about a process aftermath (e.g: item added to cart, item removed, denied access to a specific page,etc). Find below all alert types:

Basic Alerts

Alert Message Headline

This is the subtext for your alert message, providing important information or instructions.

---
import Alert from "$components/alert/Alert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  <Alert title="Alert Message Headline">
    This is the subtext for your alert message, providing important information
    or instructions.
  </Alert>
</div>

Primary Alert

Primary Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Primary Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Primary Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

---
import PrimaryAlert from "$components/alert/primary/PrimaryAlert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  {
    ["Solid", "Outlined", "Inversed"].map((variant) => {
      return (
        <PrimaryAlert
          title={`Primary Alert ${variant}`}
          variant={variant.toLowerCase()}
        >
          This is the subtext for your alert message, providing important
          information or instructions.
        </PrimaryAlert>
      );
    })
  }
</div>

Secondary Alert

Secondary Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Secondary Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Secondary Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

---
import SecondaryAlert from "$components/alert/secondary/SecondaryAlert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  {
    ["Solid", "Outlined", "Inversed"].map((variant) => {
      return (
        <SecondaryAlert
          title={`Secondary Alert ${variant}`}
          variant={variant.toLowerCase()}
        >
          This is the subtext for your alert message, providing important
          information or instructions.
        </SecondaryAlert>
      );
    })
  }
</div>

Success Alert

Success Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Success Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Success Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

---
import SuccessAlert from "$components/alert/success/SuccessAlert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  {
    ["Solid", "Outlined", "Inversed"].map((variant) => {
      return (
        <SuccessAlert
          title={`Success Alert ${variant}`}
          variant={variant.toLowerCase()}
        >
          This is the subtext for your alert message, providing important
          information or instructions.
        </SuccessAlert>
      );
    })
  }
</div>

Danger Alert

Danger Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Danger Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Danger Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

---
import DangerAlert from "$components/alert/danger/DangerAlert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  {
    ["Solid", "Outlined", "Inversed"].map((variant) => {
      return (
        <DangerAlert
          title={`Danger Alert ${variant}`}
          variant={variant.toLowerCase()}
        >
          This is the subtext for your alert message, providing important
          information or instructions.
        </DangerAlert>
      );
    })
  }
</div>

Info Alert

Info Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Info Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Info Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

---
import InfoAlert from "$components/alert/info/InfoAlert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  {
    ["Solid", "Outlined", "Inversed"].map((variant) => {
      return (
        <InfoAlert
          title={`Info Alert ${variant}`}
          variant={variant.toLowerCase()}
        >
          This is the subtext for your alert message, providing important
          information or instructions.
        </InfoAlert>
      );
    })
  }
</div>

Warning Alert

Warning Alert Solid

This is the subtext for your alert message, providing important information or instructions.

Warning Alert Outlined

This is the subtext for your alert message, providing important information or instructions.

Warning Alert Inversed

This is the subtext for your alert message, providing important information or instructions.

---
import WarningAlert from "$components/alert/warning/WarningAlert.astro";
---

<div class="flex flex-col gap-y-4 justify-center">
  {
    ["Solid", "Outlined", "Inversed"].map((variant) => {
      return (
        <WarningAlert
          title={`Warning Alert ${variant}`}
          variant={variant.toLowerCase()}
        >
          This is the subtext for your alert message, providing important
          information or instructions.
        </WarningAlert>
      );
    })
  }
</div>