Banner overview

Banners let users know something important in the current case or flow is happening.

Banners present three types of content; Information, Warnings, and Critical issues. They should appear at the top of associated regions.

Critical Banners

Critical Banners show messages that must be responded to in order to move forward or will prevent data loss. Examples include server errors, reboot timers, or a summary of form errors. Should never be dismiss-able.

Single-line and multi-line critical banner example

Warning Banners

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.

Single-line and multi-line warning banner example

Information Banners

Information Banners show useful things such as tips, help, or context. Often dismiss-able and doesn't use the multi-line pattern very often.

Single-line and wrapping informational banner example

Patterns & usage

  • Labels on calls-to-action should be written as actions or commands. Examples include: "View item," "Edit record," or "Configure section." Messages 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 messages.
  • Avoid having various types of Banners in a single region.
  • Success messages are now revealed using Toasts.

Last updated: Aug 2020