The different variants provide immediate feedback as to the results of an action, allowing people to understand the status of the system.
Notifications should be used to give users immediate, non-critical feedback on the outcome or status of an action.
Examples include:
- Successful form submission
- Important documents have been added to the user's account, ready for them to view
- A change in tariff has not completed successfully
- Information seems to be out of date
- The OVO products have planned maintenance and down-time soon
Do not use this component:
- If the message is critical, or requires the user to take an action. Consider using the Alert component instead.
- If the message relates to form field validation which has related errors. Use the ErrorSummary component instead.
Availabile platforms
|
Platform |
Available |
|---|---|
|
Figma |
✓ |
|
Web (@ovotech/element) |
✓ |
|
App (@ovotech/element-native) |
✓ |
How to use it
Choosing a notification type
There are four types of notifications:
- Info — use this to notification to give users additional information that might not be linked to the action that they're currently taking.
- Success — use this notification to let the user know that an action has been completed as expected.
- Warning — use this notification to let the user know that their action might have undesirable or unexpected results.
- Error — use this notification to let the user know that their action produced an error or critical failure.
Writing messages
- Describe what went wrong and what the user should do next
- Not everyone can see the colour of the component; write clear status messages that stand alone
Making it dismissable
Notifications can be made dismissable. Don't do this if the notification includes an action vital for the page.
Using it accessibly
- Ensure the keyboard focus is moved to a notification if it appears as a result of user action
Properties
|
Name |
Values |
Default |
|---|---|---|
|
id |
String |
|
|
title |
ReactNode |
|
|
variant |
error success info warning |
info |
|
dismissible |
Boolean |
false |
|
onDismiss Callback after a notification has been dismissed |
Function |
|
|
noMargin |
Boolean |
|
|
... |
JSX.IntrinsicElements["div"] |
|
Checking for accessibility
User stories
The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.
- As someone using the component, I want to be able to quickly understand the purpose of the notification from it's heading.
- As someone with a colour vision deficiency, I want to be able to read all the content, regardless of the colour used to display text.
- As a screen reader user, I want the notification to be announced as it becomes present.
Test steps
Use these steps to check that the Notification component has been implemented correctly:
- Turn on a screen reader.
- Trigger the notification to appear and verify that it is announced by the screen reader.
- Verify that the notification's title is announced as a heading.
Known defects
We're aware of the following defects and have provided ways that these can be manually resolved, until this component is updated:
- The title for the notification should be marked up as a heading. Where possible use a heading level 2 element (<h2>) for the notification's title.
- When using the warning variant of the Notification, hovered links have an insufficient colour contrast ratio, making them difficult to perceive. Where possible, add CSS to make the hovered link text colour darker, consistent with the way that the TextLink component works.