MessageReady

Message represents a specific item within a collection, such as notifications, tasks or conversations. Message can be placed directly inside a dropdown component.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<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

PropertyAttributeDescriptionTypeDefault
hrefhref

The url the message should link to.

string | undefinedundefined
highlighthighlight

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 | undefinedundefined
unreadunread

Mark the message as unread. By default messages are read.

boolean | undefinedundefined

Slots

Slot nameDescription
Default slot

The message content.

Methods

Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.

Programmatically move focus to the component.

blur() => voidN/A

Programmatically remove focus from the component.

click() => voidN/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.

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

KeyDescription
unreadLabel

Label for the unread messages.

For full localization guidelines, please see Localization documentation.

Localization Guidelines


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:

Ariel Salminen arrived to clinic with Pixie cat.
Patient arrived

When writing the message 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

Avoid all caps for messages:

Nina Williams arrived to clinic with Norfryd
NINA WILLIAMS ARRIVED TO CLINIC WITH NORFRYD

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.

Integration Guidelines

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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.