Overview

Notifications deliver brief, timely messages without blocking the user’s flow. They typically appear in a corner of the viewport, can stack, and (by default) auto-dismiss after a short duration. Use them for non-critical updates, confirmations, or heads-ups that don’t require page-level prominence. Notifications provide quick, unobtrusive updates for non-critical information and auto-dismiss after a short time.

Notification versus Alert

While the notification and alert components look similar, they serve different purposes.

• Notifications appear in a timely manner to inform the user about changes to the page or application.
• Alert acts as a permanent in-page information for more critical messages that require users’ immediate attention

Key Features

• Feedback types: neutral, info, warning, success, error for clear semantic messaging.
• Dismissible: Optional close control to manually dismiss.
• Actions: Optional action slot for a single, focused call to action.
• Content override: Full content can be replaced via the content slot when needed.
• Timestamp: Optional timestamp to indicate when the event occurred.
• Accessibility: Keyboard accessible and screen-reader friendly (using the right ARIA roles).

---

Anatomy

 

By default, notifications include the following elements:

1. Container – Defines the notification’s layout, appearance, and spacing.
2. Icon – Indicates the notification type and reinforces its meaning.
3. Title – A brief, bold heading summarizing the notification.
4. Timestamp: Optional timestamp to indicate when the event occurred.
5. Message Content – The main text with details for the user.
6. Close Button (Optional) – Lets users dismiss the notification manually
7. Action buttons – Interactive buttons placed in the action slot, allowing users to respond directly to the notification (such as confirming, undoing, or performing a related action).

Notifications are composed of three distinct slots, each serving a specific purpose:

1. Heading Slot – Contains the title (a brief, bold heading that summarizes the notification) and, optionally, a timestamp to indicate when the event occurred.
2. Content Slot – Holds the main message, providing details and context for the notification.
3. Action Slot – Dedicated space for button actions, allowing users to interact directly with the notification (e.g., confirming, undoing, or navigating).

---

Emphasis

Notifications can be displayed with two levels of emphasis: high and medium.

• High Emphasis: These notifications are designed to stand out and grab the user’s attention. They feature a thicker colored border and a more prominent visual style, using the feedback color (such as success, warning, or error) for the border.
• Medium Emphasis: These notifications are more subtle, with a lighter or thinner border and less visual weight. They’re suitable for less urgent or less critical messages that still need to be noticed but don’t require immediate action.

Choose the emphasis level based on the importance and urgency of the message you want to convey.

---

Feedback Type

Notifications provide users with timely updates or status messages. They come in five types:

• Information – Helpful details or guidance, not urgent.
• Warning – Potential issues that may need attention.
• Success – Confirmation that an action was completed.
• Error – Indicates a problem that may need user intervention.
• Neutral – General updates or information.

---

Dismissible

Alerts do not dismiss automatically. They persist on the page until the user dismisses them or takes action that resolves the notification.

---

Look and feel

---

Best Practice

---

Links

The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.

Component checklist

---

Feedback

Have feedback, an idea, or a bug to report? Head over to our Contributions page.