MessageReady
Message represents a specific item within a collection, such as notifications, tasks or conversations. Message can be placed directly inside a dropdown component.
<nord-message unread>
Ariel Salminen arrived to clinic with Pixie cat.
<span slot="footer">Just now at Nord Clinic</span>
</nord-message>
<nord-message unread>
Nina Hallikainen arrived to clinic with Durante dog.
<span slot="footer">20 minutes ago at Nord Clinic</span>
</nord-message>
<nord-message unread>
David Darnes arrived to clinic with Norfryd cat.
<span slot="footer">2 hours ago at Nord Clinic</span>
</nord-message>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href | href | The url the message should link to. | string | undefined | undefined |
highlight | highlight | Highlight the message visually. This is meant for highlighting a new message that just appeared. Highlight style should be removed after the user has seen the message and there’s been a timeout of e.g. 30 seconds. | boolean | undefined | undefined |
unread | unread | Mark the message as unread. By default messages are read. | boolean | undefined | undefined |
Slots
| Slot name | Description |
|---|---|
| Default slot | The message content. |
footer | Used to place content after the message. Typically used for a timestamp. |
Methods
| Method name | Parameters | Description |
|---|---|---|
focus(options?: FocusOptions) => void | options: An object which controls aspects of the focusing process. | Programmatically move focus to the component. |
blur() => void | N/A | Programmatically remove focus from the component. |
click() => void | N/A | Programmatically simulates a click on the component. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-message-border-color | Controls the border color of the message, using our color tokens. | var(--n-color-border) |
Localization
This component requires localization in a multi-lingual application. The following keys are required when registering a translation:
| Key | Description |
|---|---|
unreadLabel | Label for the unread messages. |
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
- Messages should always perform an action when clicked.
- The click action should navigate to a new page or provide more detail about the message.
- Mark unread messages as read on user interaction.
Don’t
- Don’t slot other components inside a message.
Content guidelines
Message content should be clear, accurate and easy to understand:
When writing the message 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:
Avoid all caps for messages:
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.