Use notifications to tell users about the results of an action
Notifications have a heading and extra optional text field to include additional information
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 additional text field to include details.
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 a 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
External links