Usage
A notification is a persistent, dismissible message about an event that needs attention. A Notification Group anchors and stacks the notifications; individual Notification elements live inside it.
Import the parts you need — each import registers its custom element:
import "@nordhealth/components/lib/Notification"
import "@nordhealth/components/lib/NotificationGroup"
Then add a notification inside the group:
Composition
A Notification Group is the container that positions and stacks the notifications it holds.
NotificationGroup
├── Notification
│ ├── (slot="icon")
│ └── heading, text, actions
└── Notification
<nord-notification-group>
<nord-notification>
<h2>Heading</h2>
<p>Supporting text.</p>
</nord-notification>
</nord-notification-group>
Notification Group
Notification Group anchors notifications in a fixed region and stacks them. Render one per app, and listen for its dismiss event to remove a notification when the user closes it.
Notification
Notification is a single message. Provide a heading, supporting text, and any actions in the default slot, and an optional icon slot for a leading icon.
Examples
Custom icon
Add an icon in the icon slot to reinforce the notification's context.
RTL
Notifications follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- The Notification Group is a live region, so notifications are announced to screen reader users as they appear.
- Give each Notification a clear heading and concise supporting text, and make any action a real link or button.
- Use a Notification for messages that should persist until acknowledged. For brief, self-dismissing confirmations, use a Toast instead.
API reference
Notification
Notifications provide important information that requires action or acknowledgement. A notification is displayed until the user dismisses it.
<nord-accordion></nord-accordion>Slots
| Slot name | Description |
|---|---|
Default slot | Default slot used for the notification text/message. |
icon | Slot used for the notification icon. |
| Event | Detail Type | Description |
|---|---|---|
dismiss | NordEvent | Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM. |
Parts
This component is made up of the following parts.
Notification Group
Notification group is used to position and style a group of notifications.
<nord-accordion-header></nord-accordion-header>Slots
| Slot name | Description |
|---|---|
Default slot | Default slot in which to place notifications. |
| Event | Detail Type | Description |
|---|---|---|
dismiss | NordEvent | Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM. |
Dependencies
This component is internally dependent on the following components:
- <nord-icon>
Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.
- <nord-stack>
Stack
Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.
Design guidelinesFor designers
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use for short messages that describe the purpose of the notification.
- Use for important updates that require user action/attention.
- Provide a single call to action within the notification.
- Use in combination with Notification group so that notifications get styled and positioned correctly.
Content guidelines
Notification content should be clear, accurate and easy to understand:
When writing the notification content, be concise. Keep content to 1 to 2 sentence:
When writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Always end in punctuation:
Action link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:
When writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”: