Message
Message represents a specific item within a collection, such as notifications, tasks or conversations. Message can be placed directly inside a dropdown component.
Properties
| 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:
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 .