Usage
Message represents a specific item within a collection, such as notifications, tasks or conversations. Use the default slot for the content and the footer slot for supporting detail like a timestamp. A message can be placed directly inside a dropdown.
import "@nordhealth/components/lib/Message"
Examples
Basic
A standalone message with a heading and body, the simplest building block.
Unread and read
Mark a message as unread to show an indicator. By default messages are read.
Highlight
Add highlight to visually emphasise a message that has just appeared. Remove the highlight after the user has had a chance to see it, for example after a 30 second timeout.
Links
Set href to render the message as a link.
RTL
Messages follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- A message renders as a link when
hrefis set and a button otherwise, so it is focusable and operable with the keyboard. - The unread indicator exposes an accessible label, so screen reader users are told a message is unread rather than relying on the visual dot alone.
- Use the
footerslot for supporting detail such as a timestamp so the main content stays the primary, clearly announced text.
API reference
Message
Message represents a specific item within a collection, such as notifications, tasks or conversations. Message can be placed directly inside a dropdown component.
<nord-accordion></nord-accordion>Props
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
href | href | The url the message should link to. | string | 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 | — |
unread | unread | Mark the message as unread. By default messages are read. | boolean | 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) |
Dependencies
This component is internally dependent on the following components:
Design guidelinesFor designers
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: