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.
Copied !
---
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.
Copied !
---
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>