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>
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.
Default slot used for the notification text/message.
Slot used for the notification icon.
Programmatically dismiss the notification. The returned promise resolves when notification's exit animation is complete.
This component requires localization in a multi-lingual application. The following keys are required when registering a translation:
Accessible label for the dismiss button.
For full localization guidelines, please see Localization documentation.
This component is internally dependent on the following components:
This section includes guidelines for designers and developers about the usage of this component in different contexts.
- 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”:
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.