Use notifications to inform users about the results of an action.
Notifications have a heading and optional subheading field to include additional information.
Notifications have a card shadow if they are dismissible or link to another location.
There are 4 types of notification.
1. Info
2. Success
3. Warning
4. Error
Usage
Notifications should be used to give users immediate, non-critical feedback on the outcome or status of an action. Examples include:
- Successful form submission
- A change in tariff has not completed successfully
- The OVO products have planned maintenance and down-time soon
For longer multi-sentence notification messages, use the subheading field to include details.
Alerts are not for permanent content. If the information is always relevant, use a static component.
Always include the optional close button for non-critical alerts, ensuring users can dismiss the message and keep their interface focused.
Only severe messages should prevent dismissal.
The card shadow is required when placing a notification onto a surface-bright (white) background.
Use an info notification to give users extra info that might not be linked to their current action
Use a success notification to let the user know that an action has been completed as expected.
Use a warning notification to let the user know that their action might have undesirable or unexpected results.
Use an error notification to let the user know that their action produced an error or critical failure.
Writing an error notification
- 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.
Available platforms
|
Platform |
Available |
|---|---|
|
Figma |
v1+ |
|
Web (@ovotech/element) |
v1+ |
|
App (@ovotech/element-native) |
v1+ |
Related