Library · Foundations

Notification

Versatile notification component with support for info, success, warning, error types; supports default and accent variants with optional icon display.

Figma: Primitives / Notification ↗

Default

---
import Notification from "../components/primitives/notification/Notification.astro";
---
<Notification type="info" message="This is an info notification" />
<Notification type="success" message="Success! Your changes have been saved." />
<Notification type="warning" message="Warning: Please review before proceeding." />
<Notification type="error" message="Error: Something went wrong." />

Accent

---
import Notification from "../components/primitives/notification/Notification.astro";
---
<Notification type="info" variant="accent" message="Information with icon" />
<Notification type="success" variant="accent" message="Success with icon" />
<Notification type="warning" variant="accent" message="Warning with icon" />
<Notification type="error" variant="accent" message="Error with icon" />

Slot Content

---
import Notification from "../components/primitives/notification/Notification.astro";
---
<Notification type="default" variant="accent">
  <strong>Custom content:</strong> You can use slot content instead of the message prop
</Notification>

Props

Name	Type	Required	Description
`class`	`string`	—	Additional classes to apply to the Notification
`message`	`string`	—	Notification message
`type`	`'info' \| 'success' \| 'warning' \| 'error' \| 'default'`	—	Type of notification (default: "default")
`variant`	`'default' \| 'accent'`	—	Variant of the notification (default: "default")
`element`	`'div' \| 'aside'`	—	Semantic element to use for the notification When to use div (default): - System feedback (errors, success, status messages) - User action responses - Dynamic notifications that appear/disappear When to use aside: - Educational content related to main content - Tips, explanations, or supplementary information - Content that enhances but isn't essential to understanding ```astro <!-- System notification (default) --> <Notification role="alert" type="error"> Please fix the validation errors </Notification> <!-- Educational callout --> <Notification element="aside" role="region"> <h3>Pro Tip</h3> <p>This technique works especially well...</p> </Notification> ```
`role`	`'none' \| 'alert' \| 'log' \| 'marquee' \| 'status' \| 'timer' \| 'region'`	—	ARIA role for the notification Note: 'status' implies aria-live="polite", 'alert' implies aria-live="assertive" (default: "none")
`[key: string]`	`unknown`	—	HTML attributes to spread on the notification

Example with all props

<Notification
  class="enquiry-confirmation"
  message="Your enquiry has been received."
  type="success"
  variant="accent"
  element="aside"
  role="status"
/>

<!-- Slot content can replace the message prop -->
<Notification type="info" variant="accent">
  <strong>Heads up:</strong> slot content replaces the message prop
</Notification>