Use a fixed banner to alert the user about significant information. Appearing from the top and pushing the content down, the message will :
- be closed by the user.
- disappear after a few seconds.
Prefer concise and explicit messages.
Avoid using two lines of text for a message. Never show more than one fixed banner.
Visual variants
Use the color system to give meaning to the message and allow users to consider the importance of the message.
Success messages: give a positive message to the user following a successful action.
Warning messages: give a message of vigilance in order to inform the user of a potential error or a recommendation to finish an action.
Error messages: give a negative message following an error during an action or improper use of the system and provides information for finishing the task.
Information messages: give some neutral contextual information to the user to help understand an action or to announce a minor change.
Motion
This component should slide from a corner, depending on the interaction context. Consider this component as an attention getter.
Position
Float banners always overlay the content.
Code & Design assets
Request code and design assets for creating user interfaces.
Can I contribute to the System?
Of course! Your contribution is more than welcomed and the System team will always be here to review your contributions or discuss.