Banners notify users when something important happens in the current case or flow, or when a user action is requested. Banners present three types of content: Warnings, Information, and Critical issues. Banners should appear at the top of associated regions.
Urgent Banners show messages that the user must instantly be aware of in order to move forward or to prevent data loss. Examples include server errors, reboot timers, or a summary of form errors. These banners should never be dismissible.
Warning Banners show non-blocking issues that may have serious consequences if ignored. They are often non-dismissible. Examples include legal considerations and reminders about expirations.
Information Banners show useful things such as tips, help, or context. They are often dismiss-able and do not use the multi-line pattern often.
- Labels on calls-to-action should be written as actions or commands. Examples include: "View item," "Edit record," or "Configure section."
- Content within banners should end in a period.
- There should be only one call-to-action per banner.
- Banners may either be a single line of text or stack messages when two or message of the same type appear. Examples include a few uploads failing, or more than one form field has an error.
- Use banners sparingly to emphasize importance of each message.
- Avoid having various types of banners in a single region.