Skip to content
Accessible Astro Documentation

Notification

Introduction

The Notification component provides a way to display important messages to users with different severity levels and proper ARIA attributes for accessibility. It supports various types of notifications and can be enhanced with icons.

When to use

Use notifications to display important messages that require user attention or acknowledgment. Common use cases include:

  • Status updates
  • Success messages
  • Warning alerts
  • Error messages
  • Information notices
  • System feedback
  • Form submission results

Each type of notification has a specific purpose:

  • Info: For general information and neutral updates
  • Success: To confirm successful actions or positive outcomes
  • Warning: For potential issues that need attention
  • Error: To indicate critical problems or failed actions
  • Default: For general messages that don’t fit other categories

Usage

Learn how to implement the Notification component in your project, from basic usage to advanced configurations.

---
import { Notification } from 'accessible-astro-components'
import { Icon } from 'astro-icon/components'
---


<!-- Basic notification -->
<Notification>
  <p><strong>Message:</strong> This is a notification.</p>
</Notification>


<!-- With icon and type -->
<Notification type="info" role="status">
  <Icon name="ion:information-circle-outline" />
  <p><strong>Info:</strong> This is an info notification.</p>
</Notification>

Props

Configure the Notification component using these available props to customize its behavior and appearance.

PropTypeDefaultDescription
type'info' | 'success' | 'warning' | 'error' | 'default''default'Sets the notification style and context
role'none' | 'alert' | 'log' | 'marquee' | 'status' | 'timer' | 'region''none'ARIA role for the notification
ariaLive'off' | 'polite' | 'assertive''off'Controls how screen readers announce updates
messagestring'This is a notification!'Default message when no children are provided
classstring''Additional CSS classes to apply

Accessibility

Accessibility isn’t an afterthought - it’s built into the core of this component through semantic HTML elements and proper ARIA attributes. The Notification component is built with accessibility in mind:

  • Semantic <aside> element for complementary content
  • Proper ARIA roles for dynamic content
  • High contrast colors meeting WCAG guidelines
  • Contextual information through clear labeling
  • Screen reader announcements for dynamic notifications

Styling

Make the Notification component your own with custom styling while maintaining its accessibility features.

/* Option 1: Using :global() in your style block */
<style>
  :global(.notification) {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border-inline-start: 4px solid;
    background: light-dark(hsl(204 20% 94%), hsl(215 25% 15%));
    color: light-dark(hsl(215 25% 27%), hsl(215 25% 89%));
    border-color: light-dark(hsl(215 8% 45%), hsl(215 8% 65%));
  }


  :global(.notification[data-type="info"]) {
    background: light-dark(hsl(198 100% 94%), hsl(234 54% 20%));
    color: light-dark(hsl(200 96% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(200 78% 46%), hsl(234 100% 60%));
  }


  :global(.notification[data-type="success"]) {
    background: light-dark(hsl(142 72% 94%), hsl(142 54% 20%));
    color: light-dark(hsl(142 76% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(142 78% 46%), hsl(142 100% 60%));
  }


  :global(.notification[data-type="warning"]) {
    background: light-dark(hsl(48 100% 94%), hsl(48 54% 20%));
    color: light-dark(hsl(48 96% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(48 78% 46%), hsl(48 100% 60%));
  }


  :global(.notification[data-type="error"]) {
    background: light-dark(hsl(0 100% 94%), hsl(0 54% 20%));
    color: light-dark(hsl(0 96% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(0 78% 46%), hsl(0 100% 60%));
  }
</style>


/* Option 2: Using is:global on the style tag */
<style is:global>
  .notification {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border-inline-start: 4px solid;
    background: light-dark(hsl(204 20% 94%), hsl(215 25% 15%));
    color: light-dark(hsl(215 25% 27%), hsl(215 25% 89%));
    border-color: light-dark(hsl(215 8% 45%), hsl(215 8% 65%));
  }


  .notification[data-type="info"] {
    background: light-dark(hsl(198 100% 94%), hsl(234 54% 20%));
    color: light-dark(hsl(200 96% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(200 78% 46%), hsl(234 100% 60%));
  }


  .notification[data-type="success"] {
    background: light-dark(hsl(142 72% 94%), hsl(142 54% 20%));
    color: light-dark(hsl(142 76% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(142 78% 46%), hsl(142 100% 60%));
  }


  .notification[data-type="warning"] {
    background: light-dark(hsl(48 100% 94%), hsl(48 54% 20%));
    color: light-dark(hsl(48 96% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(48 78% 46%), hsl(48 100% 60%));
  }


  .notification[data-type="error"] {
    background: light-dark(hsl(0 100% 94%), hsl(0 54% 20%));
    color: light-dark(hsl(0 96% 27%), hsl(0 0% 100%));
    border-color: light-dark(hsl(0 78% 46%), hsl(0 100% 60%));
  }
</style>

Interactive examples

See the Notification component in action with these practical examples:

Default notification

Info notification

Success notification

Warning notification

Error notification