Notifications give immediate feedback about an action triggered or experienced by an user. They will dismiss after 6 seconds, or after being clicked.
Table of contents
- Best practices
- Writing guidelines
- Consider where the notification will be placed and which variation is most appropriate
- Don't confuse notifications with notes, which persist in the UI and do not dismiss
Notification component can be configured in a number of different ways. Here is a guide to when to use certain variations.
|Success||Used for positive feedback, such as when an action has been successful|
|Error||Used for negative feedback, such as when an action has failed|
|Warning||Used for displaying warnings, such as when an action has failed due to something that can be resolved by the user|
|Top||Used to display notifications from the top of the viewport. Use when displaying notifications at the bottom isn't possible|
|Bottom (default)||Used to display notifications from the bottom of the viewport. This is the default position for notifications|
- Use clear and succinct copy, since the notification will only be available for 6 seconds
- Use active voice, present tense, and consider tone of voice depending on the circumstance
- Use sentence style caps (in which only the first word of a sentence or term is capitalized)