Banner

core package3.2.2

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.

Related components

Properties

NameDescriptionDefaultType
id*ID for the Banner. Used both as onDismiss callback arg and DOM id.string
messages*Pass one or more descriptive messages to inform the user.string[]
variant*Controls the styling of the Banner.
'success' |'urgent' |'info' |'warning' 
actionLink or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler.ReactNode
classNameAdditional CSS classes.string
headingHeading text for the Banner.string
headingTagThe heading tag to render the provided heading as. This is agnostic to the styling of the heading."h2"
'h1' |'h2' |'h3' |'h4' |'h5' |'h6' 
onDismiss(id: string) => void
refRef<HTMLDivElement>

Custom theming

You can override the styles of the Banner component by setting a custom theme on the Configuration component.

Example

Theme properties

{
      •       'icon-color': 'base.palette.light', // → base.palette.light
        •         background: 'base.palette.urgent' // → base.palette.urgent
        •       },
        •         background: 'base.palette.warn' // → base.palette.warn
        •       },
        •         background: 'base.palette.success' // → base.palette.success
        •       },
        •         background: 'base.palette.info' // → base.palette.info
        •       }
      •     }
    •   }
}