NotificationGroup
Notification group is used to position and style a group of notifications.
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. |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use in combination with Notification so that notifications get styled and positioned correctly.
- Add as close to the start of your main content area as possible.
Don’t
- Don’t use for grouping anything other than notification components
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”:
Integration
For integration guidelines, please see Web Components documentation .