Alert can be used to communicate contextual messages to the customers.
Important It has an ARIA role of
alert, which brings the immediate attention of its content to the user. It should be used for its role and not for its look.
highlighter variant of
ns-alert can be used to communicate information or error, warning and success messages.
It communicates the message that a service is not available to them or that there are technical issues on specific pages only. These messages are different to global messages as they only apply to some pages not site wide.
e.g. a message that says the top up service is not available would only apply to pages that customers will look at in order to top up.
|A||Icon||This is the icon inside the |
|B||Heading||The recommended length is between 4 and 12 words, not exceeding 50 characters in total.|
|C||Content||A single, short paragraph works best. You are able to use inline text links within the paragraph if necessary. Don't add additional headings within the paragraph and the copy length should not exceed more than two paragraphs of 3 lines each. Can contain bold copy |
|D||Accent||This is to support the context of the messaging. This colour matches that of the icon.|
The content for the
highlighter variant is dependent on the state that is used:
For communicating failure with urgence. A task cannot be completed without the user remedying something.
For communicating a useful piece of information that the user might find helpful to carry out their action.
For communicating that an action has been successful.
Use for communicating a piece of information with less severity. These include foreseeable problematic events, failures, outages and how to avoid errors.
The information contained in the alert should always be the most important information on the page. To ensure that screen reader users are informed about the importance of these messages the content is read aloud as soon as the alert type is used. This could be when the page loads or when it is dynamically added to a page.
If there are multiple alerts on a page they are read:
- from top to bottom on page load
- in the order they have been added to the page when dynamically added
- Be clear and concise
The message must be in plain English, and help the user out of the situation by providing an actionable link if possible.
|💚 Do's||💔 Don'ts|
|Keep the messages concise||Use for generic message that is not in context to the page it is displayed in|
|Use an icon to alert the user what type of message it is||Use it for Roadblock error messaging|
The ns-alert component can be used in the following components:
|Type of alert to use|
|Defines the role of the highlighter and changes the styles|
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.