Banner

A banner is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed.

Examples

Basic

Banners can be styled with one of 9 different colors using the color prop. A basic banner should only be used when the banner color does not represent status or severity.

Default banner

Red banner

Orangered banner

Orange banner

Yellow banner

Green banner

Teal banner

Blue banner

Purple banner

Status

When a banner is used to convey status it should be styled using the status prop. Additionally, it is advised to pass an icon inside the banner to convey the status in a way besides just color.

The screenReaderText prop should also be passed in to convey the status/severity of the banner to users of certain assistive technologies such as screen readers.

In the following example, a flex layout is used inside the banner content to show one possible way to create spacing between the icons and banner text.

Success banner
Success banner

Warning banner
Warning banner

Danger banner
Danger banner

Info banner
Info banner

Custom banner
Custom banner

Props

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the banner.
classNamestringAdditional classes added to the banner.
color'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple'Color options for the banner, will be overwritten by any applied using the status prop.
isStickybooleanfalseIf set to true, the banner sticks to the top of its container
screenReaderTextstringText announced by screen readers to indicate the type of banner. This prop should only be passed in when the banner conveys status/severity.
status'success' | 'warning' | 'danger' | 'info' | 'custom'Status style options for the banner, will overwrite any color applied using the color prop.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-banner--pf-v6-c-banner--PaddingBlockStart
0.25rem
.pf-v6-c-banner--pf-v6-c-banner--PaddingInlineEnd
1rem
.pf-v6-c-banner--pf-v6-c-banner--md--PaddingInlineEnd
1.5rem
.pf-v6-c-banner--pf-v6-c-banner--PaddingBlockEnd
0.25rem
.pf-v6-c-banner--pf-v6-c-banner--PaddingInlineStart
1rem
.pf-v6-c-banner--pf-v6-c-banner--md--PaddingInlineStart
1.5rem
.pf-v6-c-banner--pf-v6-c-banner--FontSize
0.875rem
.pf-v6-c-banner--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--BackgroundColor
(In light theme) #e0e0e0
.pf-v6-c-banner--pf-v6-c-banner--link--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--link--TextDecoration
underline
.pf-v6-c-banner--pf-v6-c-banner--link--hover--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--link--disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-banner--pf-v6-c-banner--m-sticky--ZIndex
300
.pf-v6-c-banner--pf-v6-c-banner--m-sticky--BoxShadow
0px 4px 9px 0px rgba(41, 41, 41, 0.1500)
.pf-v6-c-banner--pf-v6-c-banner--m-danger--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-banner--pf-v6-c-banner--m-danger--Color
(In light theme) #ffffff
.pf-v6-c-banner--pf-v6-c-banner--m-success--BackgroundColor
(In light theme) #3d7317
.pf-v6-c-banner--pf-v6-c-banner--m-success--Color
(In light theme) #ffffff
.pf-v6-c-banner--pf-v6-c-banner--m-warning--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-banner--pf-v6-c-banner--m-warning--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-info--BackgroundColor
(In light theme) #5e40be
.pf-v6-c-banner--pf-v6-c-banner--m-info--Color
(In light theme) #ffffff
.pf-v6-c-banner--pf-v6-c-banner--m-custom--BackgroundColor
(In light theme) #147878
.pf-v6-c-banner--pf-v6-c-banner--m-custom--Color
(In light theme) #ffffff
.pf-v6-c-banner--pf-v6-c-banner--m-red--BackgroundColor
(In light theme) #fbc5c5
.pf-v6-c-banner--pf-v6-c-banner--m-red--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-orangered--BackgroundColor
(In light theme) #fbbea8
.pf-v6-c-banner--pf-v6-c-banner--m-orangered--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-orange--BackgroundColor
(In light theme) #fccb8f
.pf-v6-c-banner--pf-v6-c-banner--m-orange--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-yellow--BackgroundColor
(In light theme) #ffe072
.pf-v6-c-banner--pf-v6-c-banner--m-yellow--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-green--BackgroundColor
(In light theme) #d1f1bb
.pf-v6-c-banner--pf-v6-c-banner--m-green--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-teal--BackgroundColor
(In light theme) #b9e5e5
.pf-v6-c-banner--pf-v6-c-banner--m-teal--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-blue--BackgroundColor
(In light theme) #b9dafc
.pf-v6-c-banner--pf-v6-c-banner--m-blue--Color
(In light theme) #151515
.pf-v6-c-banner--pf-v6-c-banner--m-purple--BackgroundColor
(In light theme) #d0c5f4
.pf-v6-c-banner--pf-v6-c-banner--m-purple--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-danger--pf-v6-c-banner--BackgroundColor
(In light theme) #b1380b
.pf-v6-c-banner.pf-m-danger--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-success--pf-v6-c-banner--BackgroundColor
(In light theme) #3d7317
.pf-v6-c-banner.pf-m-success--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-warning--pf-v6-c-banner--BackgroundColor
(In light theme) #ffcc17
.pf-v6-c-banner.pf-m-warning--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-info--pf-v6-c-banner--BackgroundColor
(In light theme) #5e40be
.pf-v6-c-banner.pf-m-info--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-custom--pf-v6-c-banner--BackgroundColor
(In light theme) #147878
.pf-v6-c-banner.pf-m-custom--pf-v6-c-banner--Color
(In light theme) #ffffff
.pf-v6-c-banner.pf-m-red--pf-v6-c-banner--BackgroundColor
(In light theme) #fbc5c5
.pf-v6-c-banner.pf-m-red--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-orangered--pf-v6-c-banner--BackgroundColor
(In light theme) #fbbea8
.pf-v6-c-banner.pf-m-orangered--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-orange--pf-v6-c-banner--BackgroundColor
(In light theme) #fccb8f
.pf-v6-c-banner.pf-m-orange--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-yellow--pf-v6-c-banner--BackgroundColor
(In light theme) #ffe072
.pf-v6-c-banner.pf-m-yellow--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-green--pf-v6-c-banner--BackgroundColor
(In light theme) #d1f1bb
.pf-v6-c-banner.pf-m-green--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-teal--pf-v6-c-banner--BackgroundColor
(In light theme) #b9e5e5
.pf-v6-c-banner.pf-m-teal--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-blue--pf-v6-c-banner--BackgroundColor
(In light theme) #b9dafc
.pf-v6-c-banner.pf-m-blue--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner.pf-m-purple--pf-v6-c-banner--BackgroundColor
(In light theme) #d0c5f4
.pf-v6-c-banner.pf-m-purple--pf-v6-c-banner--Color
(In light theme) #151515
.pf-v6-c-banner a:hover:not(.pf-m-disabled)--pf-v6-c-banner--link--Color
(In light theme) #151515
.pf-v6-c-banner a.pf-m-disabled--pf-v6-c-banner--link--Color
(In light theme) #a3a3a3
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline--pf-v6-c-button--m-link--Color
(In light theme) #151515
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline--pf-v6-c-button--m-link--hover--Color
(In light theme) #151515
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline--pf-v6-c-button--disabled--Color
(In light theme) #a3a3a3