Skip to content
PatternFly.org Contribute on Github
PatternFly Elements
Versions v5 v4 v3 v2 v1

Banner

A banner provides a full-width container for communicating short, non-dismissible messages. Use a banner when you need to display a brief announcement that allows users to continue without interruption.

Status banners SHOULD include an icon and visually-hidden text so screen readers can announce the status context (WCAG 1.3.1). Authors SHOULD AVOID using color alone to convey meaning (WCAG 1.4.1).

The banner is not focusable. Slotted interactive content like links remains focusable via Tab.

Overview

A banner provides a full-width container for communicating short, non-dismissible messages.

Default banner

Installation

npm install @patternfly/elements

Usage

Default

Default banner
View HTML Source 
<pf-v6-banner>Default banner</pf-v6-banner>

Status

When a banner conveys status, use the status attribute. Include an icon and visually-hidden text for screen reader context.

Danger alert: Danger banner
View HTML Source 
<pf-v6-banner status="danger">
  <span class="pf-v6-screen-reader">Danger alert:</span>
  Danger banner
</pf-v6-banner>

Sticky

Use the sticky attribute to keep the banner visible at the top of a scrolling container.

Sticky banner
View HTML Source 
<pf-v6-banner sticky>Sticky banner</pf-v6-banner>

Slots

Default Slot

Banner message content (text, links, icons). When status is set, include a visually-hidden <span> for screen reader context, e.g. <span class="pf-v6-screen-reader">Danger alert:</span>.

Attributes

color

Non-status (decorative) color for the banner background. Overridden by status if both are set.

DOM Property
color
Type
'red' | 'orangered' | 'orange' | 'yellow' | 'green' | 'teal' | 'blue' | 'purple'
Default
unknown
status

Status style for the banner. Conveys semantic meaning and overrides color. When set, authors SHOULD slot visually-hidden text for screen readers, e.g. <span class="pf-v6-screen-reader">Danger alert:</span>.

DOM Property
status
Type
'success' | 'warning' | 'danger' | 'info' | 'custom'
Default
unknown
sticky

Whether the banner sticks to the top of its container.

DOM Property
sticky
Type
boolean
Default
false

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-v6-c-banner--BackgroundColor

Default banner background color

 var(--pf-t--global--color--nonstatus--gray--default, light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d)))
--pf-v6-c-banner--Color

Default banner text color

 var(--pf-t--global--text--color--nonstatus--on-gray--default, light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff)))
--pf-v6-c-banner--FontSize

Banner font size

 var(--pf-t--global--font--size--body--default, 0.875rem)
--pf-v6-c-banner--PaddingBlockStart

Block (vertical) padding

 var(--pf-t--global--spacer--xs, 0.25rem)
--pf-v6-c-banner--PaddingInlineStart

Inline (horizontal) padding

 var(--pf-t--global--spacer--md, 1rem)
--pf-v6-c-banner--md--PaddingInlineStart

Inline padding at medium breakpoint

 var(--pf-t--global--spacer--lg, 1.5rem)
--pf-v6-c-banner--BorderColor

Block border color (high-contrast mode)

 var(--pf-t--global--border--color--high-contrast, transparent)
--pf-v6-c-banner--BorderWidth

Block border width (high-contrast mode)

 var(--pf-t--global--border--width--high-contrast--regular, 0)
--pf-v6-c-banner--m-sticky--ZIndex

Z-index when sticky

 var(--pf-t--global--z-index--md, 300)
--pf-v6-c-banner--m-sticky--BoxShadow

Box shadow when sticky

 var(--pf-t--global--box-shadow--md)
--pf-v6-c-banner--m-red--BackgroundColor

Red color variant background

 var(--pf-t--global--color--nonstatus--red--default, light-dark(var(--pf-t--color--red--20, #fbc5c5), var(--pf-t--color--red--30, #f9a8a8)))
--pf-v6-c-banner--m-red--Color

Red color variant text

 var(--pf-t--global--text--color--nonstatus--on-red--default, var(--pf-t--color--gray--100, #151515))
--pf-v6-c-banner--m-orangered--BackgroundColor

Orangered color variant background

 var(--pf-t--global--color--nonstatus--orangered--default, light-dark(var(--pf-t--color--red-orange--20, #fbbea8), var(--pf-t--color--red-orange--30, #f89b78)))
--pf-v6-c-banner--m-orangered--Color

Orangered color variant text

 var(--pf-t--global--text--color--nonstatus--on-orangered--default, var(--pf-t--color--gray--100, #151515))
--pf-v6-c-banner--m-orange--BackgroundColor

Orange color variant background

 var(--pf-t--global--color--nonstatus--orange--default, light-dark(var(--pf-t--color--orange--20, #fccb8f), var(--pf-t--color--orange--30, #f8ae54)))
--pf-v6-c-banner--m-orange--Color

Orange color variant text

 var(--pf-t--global--text--color--nonstatus--on-orange--default, var(--pf-t--color--gray--100, #151515))
--pf-v6-c-banner--m-yellow--BackgroundColor

Yellow color variant background

 var(--pf-t--global--color--nonstatus--yellow--default, light-dark(var(--pf-t--color--yellow--20, #ffe072), var(--pf-t--color--yellow--30, #ffcc17)))
--pf-v6-c-banner--m-yellow--Color

Yellow color variant text

 var(--pf-t--global--text--color--nonstatus--on-yellow--default, var(--pf-t--color--gray--100, #151515))
--pf-v6-c-banner--m-green--BackgroundColor

Green color variant background

 var(--pf-t--global--color--nonstatus--green--default, light-dark(var(--pf-t--color--green--20, #d1f1bb), var(--pf-t--color--green--30, #afdc8f)))
--pf-v6-c-banner--m-green--Color

Green color variant text

 var(--pf-t--global--text--color--nonstatus--on-green--default, var(--pf-t--color--gray--100, #151515))
--pf-v6-c-banner--m-teal--BackgroundColor

Teal color variant background

 var(--pf-t--global--color--nonstatus--teal--default, light-dark(var(--pf-t--color--teal--20, #b9e5e5), var(--pf-t--color--teal--30, #9ad8d8)))
--pf-v6-c-banner--m-teal--Color

Teal color variant text

 —
--pf-v6-c-banner--m-blue--BackgroundColor

Blue color variant background

 —
--pf-v6-c-banner--m-blue--Color

Blue color variant text

 —
--pf-v6-c-banner--m-purple--BackgroundColor

Purple color variant background

 —
--pf-v6-c-banner--m-purple--Color

Purple color variant text

 —
--pf-v6-c-banner--m-danger--BackgroundColor

Danger status background

 —
--pf-v6-c-banner--m-danger--Color

Danger status text

 —
--pf-v6-c-banner--m-success--BackgroundColor

Success status background

 —
--pf-v6-c-banner--m-success--Color

Success status text

 —
--pf-v6-c-banner--m-warning--BackgroundColor

Warning status background

 —
--pf-v6-c-banner--m-warning--Color

Warning status text

 —
--pf-v6-c-banner--m-info--BackgroundColor

Info status background

 —
--pf-v6-c-banner--m-info--Color

Info status text

 —
--pf-v6-c-banner--m-custom--BackgroundColor

Custom status background

 —
--pf-v6-c-banner--m-custom--Color

Custom status text

 —
--pf-t--global--z-index--md 300
--pf-t--global--box-shadow--md —
--pf-t--global--color--nonstatus--gray--default light-dark(var(--pf-t--color--gray--20, #e0e0e0), var(--pf-t--color--gray--60, #4d4d4d))
--pf-t--color--gray--20 #e0e0e0
--pf-t--color--gray--60 #4d4d4d
--pf-t--global--text--color--nonstatus--on-gray--default light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--white, #ffffff))
--pf-t--global--spacer--xs 0.25rem
--pf-t--global--spacer--md 1rem
--pf-t--global--font--size--body--default 0.875rem
--pf-t--global--border--color--high-contrast transparent
--pf-t--global--border--width--high-contrast--regular 0
--pf-t--global--spacer--lg 1.5rem
--pf-t--global--color--nonstatus--red--default light-dark(var(--pf-t--color--red--20, #fbc5c5), var(--pf-t--color--red--30, #f9a8a8))
--pf-t--color--red--20 #fbc5c5
--pf-t--color--red--30 #f9a8a8
--pf-t--global--text--color--nonstatus--on-red--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--orangered--default light-dark(var(--pf-t--color--red-orange--20, #fbbea8), var(--pf-t--color--red-orange--30, #f89b78))
--pf-t--color--red-orange--20 #fbbea8
--pf-t--color--red-orange--30 #f89b78
--pf-t--global--text--color--nonstatus--on-orangered--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--orange--default light-dark(var(--pf-t--color--orange--20, #fccb8f), var(--pf-t--color--orange--30, #f8ae54))
--pf-t--color--orange--20 #fccb8f
--pf-t--color--orange--30 #f8ae54
--pf-t--global--text--color--nonstatus--on-orange--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--yellow--default light-dark(var(--pf-t--color--yellow--20, #ffe072), var(--pf-t--color--yellow--30, #ffcc17))
--pf-t--color--yellow--20 #ffe072
--pf-t--global--text--color--nonstatus--on-yellow--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--green--default light-dark(var(--pf-t--color--green--20, #d1f1bb), var(--pf-t--color--green--30, #afdc8f))
--pf-t--color--green--20 #d1f1bb
--pf-t--color--green--30 #afdc8f
--pf-t--global--text--color--nonstatus--on-green--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--teal--default light-dark(var(--pf-t--color--teal--20, #b9e5e5), var(--pf-t--color--teal--30, #9ad8d8))
--pf-t--color--teal--20 #b9e5e5
--pf-t--color--teal--30 #9ad8d8
--pf-t--global--text--color--nonstatus--on-teal--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--blue--default light-dark(var(--pf-t--color--blue--20, #b9dafc), var(--pf-t--color--blue--30, #92c5f9))
--pf-t--color--blue--20 #b9dafc
--pf-t--color--blue--30 #92c5f9
--pf-t--global--text--color--nonstatus--on-blue--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--nonstatus--purple--default light-dark(var(--pf-t--color--purple--20, #d0c5f4), var(--pf-t--color--purple--30, #b6a6e9))
--pf-t--color--purple--20 #d0c5f4
--pf-t--global--text--color--nonstatus--on-purple--default var(--pf-t--color--gray--100, #151515)
--pf-t--global--color--status--danger--default light-dark(var(--pf-t--color--red-orange--60, #b1380b), var(--pf-t--color--red-orange--50, #f0561d))
--pf-t--color--red-orange--60 #b1380b
--pf-t--color--red-orange--50 #f0561d
--pf-t--global--text--color--status--on-danger--default light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))
--pf-t--global--color--status--success--default light-dark(var(--pf-t--color--green--60, #3d7317), var(--pf-t--color--green--40, #87bb62))
--pf-t--color--green--60 #3d7317
--pf-t--color--green--40 #87bb62
--pf-t--global--text--color--status--on-success--default light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))
--pf-t--global--color--status--warning--default light-dark(var(--pf-t--color--yellow--30, #ffcc17), var(--pf-t--color--yellow--30, #ffcc17))
--pf-t--color--yellow--30 #ffcc17
--pf-t--global--text--color--status--on-warning--default light-dark(var(--pf-t--color--gray--100, #151515), var(--pf-t--color--gray--100, #1f1f1f))
--pf-t--global--color--status--info--default light-dark(var(--pf-t--color--purple--50, #5e40be), var(--pf-t--color--purple--30, #b6a6e9))
--pf-t--color--purple--50 #5e40be
--pf-t--color--purple--30 #b6a6e9
--pf-t--global--text--color--status--on-info--default light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))
--pf-t--global--color--status--custom--default light-dark(var(--pf-t--color--teal--60, #147878), var(--pf-t--color--teal--40, #63bdbd))
--pf-t--color--teal--60 #147878
--pf-t--color--teal--40 #63bdbd
--pf-t--global--text--color--status--on-custom--default light-dark(var(--pf-t--color--white, #ffffff), var(--pf-t--color--gray--100, #1f1f1f))
--pf-t--color--white #ffffff
--pf-t--color--gray--100 #1f1f1f

CSS Shadow Parts

None

© 2018-2026 Red Hat, Inc. Deploys by Netlify