Notifications are used to bring the user's attention on a piece of information that needs to be known. A notification is usually the result of an action made by the user.
The notification component is made of:
- An icon: In addition to the frame color, it allows to specify the degree of importance.
- A title (optional): Concise and precise, to quickly guide the user.
- A paragraph: To complete the title to be more precise, or indicate the actions to follow.
- One or some actions (optional): A link or button(s) can be used when users need to do an action.
For SEO & accessibility reasons, a paragraph is always required inside a notification.
To learn more about the colors usage, please read the color documentation.
Informational notifications are blue. They are used to highlight a piece of relevant information but don't require immediate action.
Success notifications are green. They are used when an action is successful.
Warning notifications are orange. They warn the user about important information that deserves caution.
Danger notifications are red. They are used to warn the user of an error or a problem. This may require immediate action.
Notifications are available in two sizes.
This size is less common and must be used inside a box only. The message or required action must be related to the content of the box.
This is the default variation to use in most cases and is mainly positioned at the top of a page.
Use a link when the message indicates an action to do on a different page.
Use a button when the message indicates an action to do immediately.
In specific cases, you can use a closable notification in your project.
Closable notification can be used with the medium size variation only.