Banner

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.

Usage

The banner component should be displayed at the top of the region the banner is addressing.

Variations

Urgent banners

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

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

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.

Content guidelines

  • 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 when a few uploads fail, or when 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.

Configuration

All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Documentation.

Related components