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

Quick example

Info: Try different notification types below!

Success: Your action was completed successfully.

Warning: Please review before proceeding.

Dynamic notifications

When adding notifications dynamically (after user interaction), use role="status" and aria-live="polite" to inform screen reader users.

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>

Accent variant (automatic icons)

The accent variant includes automatic icons and sleek styling - no manual icon management needed!

<!-- Accent notifications with automatic icons -->
<Notification type="success" variant="accent" role="status">
  <p><strong>Success:</strong> Your file has been uploaded!</p>
</Notification>

<Notification type="warning" variant="accent" role="status">
  <p><strong>Warning:</strong> Storage space is running low.</p>
</Notification>

<Notification type="error" variant="accent" role="alert">
  <p><strong>Error:</strong> Failed to connect to server.</p>
</Notification>

Icon integration

The default variant examples use Astro Icon for manual icons, but the accent variant includes automatic icons for all notification types.

Props

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

Prop	Type	Default	Description
type	'info' | 'success' | 'warning' | 'error' | 'default'	'default'	Sets the notification style and context
variant	'default' | 'accent'	'default'	Visual style variant of the notification
element	'div' | 'aside'	'div'	Semantic element to use for the notification
role	'none' | 'alert' | 'log' | 'marquee' | 'status' | 'timer' | 'region'	'none'	ARIA role for the notification
message	string	'This is a notification!'	Default message when no children are provided
class	string	''	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.

Accessibility considerations

When customizing styles, ensure you maintain sufficient color contrast ratios and don’t remove focus indicators or other accessibility features.

Custom CSS

/* 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>

Tailwind Classes

<Notification
  type="info"
  class="flex gap-4 p-4 rounded-lg border-l-4 bg-blue-50 dark:bg-blue-900 text-blue-900 dark:text-white border-blue-500"
>
  <Icon name="ion:information-circle-outline" size="1.5rem" />
  <p>Notification content with Tailwind styling</p>
</Notification>

Style scoping

Astro components use scoped styles by default. To override component styles, you’ll need to use either :global() selectors or the is:global directive on your style tag.

Interactive examples

See the Notification component in action with these practical examples:

Default notification

Message: This is a notification.

Info notification

Info: This is a notification of type info.

Success notification

Success: This is a notification of type success.

Warning notification

Warning: This is a notification of type warning.

Error notification

Error: This is a notification of type error.

Accent variant notifications

The accent variant provides a sleek design with automatic icons and a beautiful left border accent. Perfect for modern interfaces!

Info: This accent notification automatically includes an icon and styled border.

Success: Your changes have been saved successfully!

Warning: Please review your input before continuing.

Error: Something went wrong. Please try again.

Default: A neutral accent notification for general messages.