NotificationNew
Notifications provide important information that requires action or acknowledgement. A notification is displayed until the user dismisses it.
<nord-notification-group>
<nord-notification>
<h2>Patient arrived</h2>
<p>Ariel Salminen arrived to clinic with Pixie cat.</p>
<a href="#">Start consultation</a>
</nord-notification>
</nord-notification-group>
<script>
const group = document.querySelector("nord-notification-group")
group.addEventListener("dismiss", e => e.target.remove())
</script>Events
| Event | Description | Type |
|---|---|---|
dismiss | 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. | NordEvent |
Slots
| Slot name | Description |
|---|---|
| Default slot | Default slot used for the notification text/message. |
icon | Slot used for the notification icon. |
Methods
| Method name | Parameters | Description |
|---|---|---|
dismiss() => void | N/A | Programmatically dismiss the notification. The returned promise resolves when notification's exit animation is complete. |
Localization
This component requires localization in a multi-lingual application. The following keys are required when registering a translation:
| Key | Description |
|---|---|
dismissLabel | Accessible label for the dismiss button. |
For full localization guidelines, please see Localization documentation.
Dependencies
This component is internally dependent on the following components:
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.
Don’t #
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. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.