Banner

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 action region for further user interaction, as well as an onDismiss callback function that will render a dismiss Button. The Banner component also accepts heading text to offer more specificity. The HTML tag for this heading can be modified via the headingTag prop, but is set to h2 by default.

For more information on how to use the features and props for this component, check out the developer documentation.

Success Banners

Success Banners provide positive feedback for tasks or actions that were completed. They are often dismissible.

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.

NameTypeDefaultDescription
id*stringID for the Banner. Used both as onDismiss callback arg and DOM id.
messages*string[]Pass one or more descriptive messages to inform the user.
variant*
'urgent' |'success' |'warning' |'info' 
Controls the styling of the Banner.
actionReactNodeLink or Button provided to the user for next steps. Link should use regular href and Button should use an onClick handler.
classNamestringAdditional CSS classes.
headingstringHeading text for the Banner.
headingTag
'h1' |'h2' |'h3' |'h4' |'h5' |'h6' 
"h2" The heading tag to render the provided heading as. This is agnostic to the styling of the heading.
onDismiss(id: string) => voidCallback when user explicitly dismisses the Banner.
refRef<HTMLDivElement>

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

{
      •       '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
        •       }
      •     }
    •   }
}