Alert

See all Alerts in the Alerts page.

Overview

The <Alert /> component displays messages to users with contextual styling and optional icons, descriptions, lists, links, and dismiss functionality.

Basic Usage

<Alert 
  variant="warning"
  title="Heads up!" 
  description="This is a basic warning alert."
/>

Example

---

Props

Prop	Type	Default	Description
variant	string	"warning"	Visual context (warning, error, info, success, neutral)
title	string	""	Main heading text
description	string	""	Supporting content below the title
list	string[]	[]	Optional list of items to show under the description
links	object[]	[]	Array of { href, label } for link buttons below the alert
dismissible	boolean	false	Shows a close button if true
icon	Component | null	undefined	Custom icon component (pass null to hide)
role	string	"alert"	ARIA role (alert, status, etc.) for accessibility

Variants

<Alert variant="warning" title="Caution" description="This is a warning." />
<Alert variant="error" title="Error" description="Something went wrong." />
<Alert variant="info" title="Info" description="Here’s some additional context." />
<Alert variant="success" title="Success" description="Your action was successful." />
<Alert variant="neutral" title="Note" description="This is a neutral alert." />

Example

---

Lists

<Alert 
  title="Update Required"
  description="Please update the following:"
  list={["Node.js v18+", "Astro v4", "Tailwind CSS 3.4"]}
  variant="info"
/>

Example

---

Links

<Alert 
  title="New Feature"
  description="We’ve launched something new."
  links={[
    { href: "/docs", label: "View Docs" },
    { href: "/changelog", label: "Changelog" },
  ]}
  variant="success"
/>

Example

---

Dismissible

<Alert 
  title="Heads Up!"
  description="This alert can be dismissed."
  dismissible={true}
/>

Example

---

Custom Icon

You can override the default icon or remove it entirely:

<Alert 
  title="No Icon Example"
  description="This alert has no icon."
  icon={null}
/>

Example

Or pass your own icon:

import Info from "@/components/fundations/icons/RoundedInfo.astro";

<Alert 
variant="info"
  title="Custom Icon"
  description="Using a custom icon here."
  icon={Info}
/>

Example

---

Accessibility

• Alerts use appropriate role and aria-live settings.
• role="alert" is assertive for errors; others use polite.
• Dismiss buttons are keyboard- and screen-reader-friendly.

---

Best Practices

• Use error variant for critical feedback (form failures, system errors).
• Use info or neutral for general context or status updates.
• Use success for confirmations or completed actions.
• Avoid using alerts excessively; reserve for meaningful feedback.