A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.


To implement an accessible PatternFly banner:

  • Check the color contrast of a banner and any text on it to make sure they can be read by users with color blindness or other visual impairments.
  • When a banner is used to convey status, add an icon that also conveys status visually, and provide screen reader text using .pf-screen-reader or an equivalent.


At a minimum, a banner should meet the following criteria:

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Applied to
screenReaderText="[visually hidden text that describes the banner status]"
Adds text that is accessible only to assistive technologies and is not visually rendered. This prop should only be passed in when the banner is meant to convey status.

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Attribute or class
Applied to
Provides an accessible description of the type of banner. Required if banner conveys status

View source on GitHub