Notification

Overview

Examples

Properties

Slots

Events

Dependencies

Usage

Integration

Notifications provide important information that requires action or acknowledgement. A notification is displayed until the user dismisses it.

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.

This component has no CSS custom properties.

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.

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

Don’t use for transient or unimportant messages. Consider using a Toast instead.
Don't remove a notification until a user has explicitly dismissed, or acted on the notification.
Don’t use for error messages unless absolutely necessary. Try to favor a Banner for error messaging instead.

Content guidelines

Notification content should be clear, accurate and easy to understand:

Ariel Salminen arrived to clinic with Pixie cat.

Patient arrived

When writing the notification content, be concise. Keep content to 1 to 2 sentence:

You’ve reached the limit of 30 users included in your plan. Upgrade to add more.

You have reached the user limit. Your clinic can only have a maximum of 30 users. To add more users, remove users you no longer need or upgrade your plan to add more.

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):

Ariel Salminen arrived to clinic with Pixie cat.

Ariel Salminen Arrived To Clinic With Pixie Cat.

Always end in punctuation:

Ariel Salminen arrived to clinic with Pixie cat.

Ariel Salminen arrived to clinic with Pixie cat

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:

Start consultation

Click here

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):

Start consultation

Start Consultation

Avoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:

Add item

Add an item

Integration

For integration guidelines, please see Web Components documentation .