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
Variants
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.
children
nodeAn element rendered inside the
Page Banner.dismissible
boolDefaultfalseBoolean used to control whether
Page Banneris dismissible.dismissAltText
nodeDefault'Dismiss'An element to be set as the dismiss button's alt text (preferably a translated string).
onDismiss
funcDefault() => {}A function to be called on dismiss of the
Page Banner.show
boolDefaulttrueBoolean used to control whether the Page Banner shows.
variant
enum'light' | 'dark' | 'warning' | 'accentA'Default'accentA'A string designating which color variant of the
Page Bannerto display