Page Banner

A Page Banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Basic Usage


The system warning banner is similar to the Alert Banner banner in styling, except that the text is always default body (14px) and padding has been modified in order to accommodate the Page Banner component. It cannot be dismissed.

PageBanner Props API
  • children node

    An element rendered inside the Page Banner.

  • dismissible bool

    Boolean used to control whether Page Banner is dismissible.

  • dismissAltText node

    An element to be set as the dismiss button's alt text (preferably a translated string).

  • onDismiss func

    A function to be called on dismiss of the Page Banner.

    Default() => {}
  • show bool

    Boolean used to control whether the Page Banner shows.

  • variant enum'light' | 'dark' | 'warning' | 'accentA'

    A string designating which color variant of the Page Banner to display