Theme

npm_versionnpm Paragon package page

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 Variants

Any Paragon component or export may be added to the code example.

Warning Banner

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.

Any Paragon component or export may be added to the code example.

Props API#

PageBanner Props API
  • children node

    An element rendered inside the Page Banner.

  • dismissible bool

    Boolean used to control whether Page Banner is dismissible.

    Defaultfalse
  • dismissAltText node

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

    Default'Dismiss'
  • 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.

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

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

    Default'accentA'

Usage Insights#

PageBanner

Project NameParagon VersionInstance Count
frontend-app-admin-portal21.13.11
frontend-app-course-authoring22.4.01
frontend-app-discussions22.1.11
frontend-app-learner-dashboard22.4.01
frontend-app-learner-portal-enterprise21.13.11
frontend-app-learning22.3.02
frontend-app-ora-grading21.11.32