| Name | Description | Default | Type |
|---|---|---|---|
messages* | Pass one or more descriptive messages to inform the user. | | string |BannerMessage[] |
variant* | Controls the styling of the Banner. | | 'success' |'info' |'warning' |'urgent' |
className | Additional CSS classes. | | string |
handle | Ref that can be used to access the imperative handle. | | Ref<BannerHandleValue> |
headingTag | The heading tag to render the provided heading as. This is agnostic to the styling of the heading. | 'h2' | HeadingTag |
onDismiss | Callback when user explicitly dismisses the Banner. | | MouseEventHandler |
ref | Ref forwarded to the wrapping element. | | Ref<HTMLDivElement> |
Banner
core package4.0.1
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Banners notify users when something important happens in a 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.
The Banner component expects a list of messages to display as well as a variant. Optionally, Banners may include an onDismiss callback function that will render a dismiss Button. Each message may consist of a label, an optional description, optional actions, and nested messages.
If there is more than one message, the Banner component will render a heading that is associated with the chosen variant. This value is localizable. The HTML tag for the heading can be modified via the headingTag prop, but is set to h2 by default. The messages will be rendered within an ExpandCollapse region.
An imperative handle can be passed to the component to allow control of the Banner element. This is useful for setting focus to the Banner when it renders in order to draw the user's attention to the messages.
Variants
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 dismissible and do not use the multi-line pattern often.