Examples
Basic colors
The eight tonal variants — red, orangered, orange, yellow, green, teal, blue, purple. Use for marketing or content emphasis without implying severity.
Status
Five semantic states — success, warning, danger, info, custom. Each (except custom) auto-renders the matching icon.
Pair with screenReaderText for AT context.
Screen reader text
Prepend a visually-hidden prefix that AT announces but sighted users don't see — e.g. "Info alert:" before the visible message.
Sticky
Add sticky=true for pf-m-sticky — the banner pins to the top
of its nearest scroll parent (here a 220px-tall box). Useful for persistent warnings in scrollable panels.
Scroll down to see the sticky banner stay at the top.
More content below…
Even more content…
Almost at the bottom…
End of scrollable content.
Documentation
Banner props
Parameters accepted by
{#include components/feedback/banner ... /}. Model mode: pass
banner=<Banner> built in Java instead — the Java tab on each example shows the
builder. The visible text goes in a {#message}...{/message} block.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — | DOM id on the banner container. |
* variant
|
Color: red | orangered | orange | yellow | green | teal | blue | purpleStatus: success | warning | danger | info | custom
|
— |
Emits pf-m-{variant}. Status variants (except
custom) auto-render an icon; color variants are plain.
|
sticky
|
boolean |
false
|
Adds pf-m-sticky. Banner pins to the top of its nearest scroll-parent. PF
React's isSticky.
|
screenReaderText
|
String | — |
Visually-hidden prefix announced before the message — e.g. "Warning:".
Recommended for status banners.
|
slot message
|
Qute block | — | The visible banner content. Supports inline HTML — links, strong, em. |
Divergence from PF React. PF React has separate color and
status props; we collapse them into one variant enum
(they're mutually exclusive in PF too). The slot is named message (not
content) to avoid the Qute slot-name collision inside example-card. PF React's
isSticky is our shorter sticky.
Usage
Color vs. status. Use a status variant when the message has a clear severity (success, warning, danger, info). Use a color variant for content / marketing emphasis where icon + label would be visual noise.
Where to put it. Banners live above the masthead for global messages, or inside a content section for scoped notices. They're never inline in body copy — use Alert for that.
Sticky requires a scroll parent.
pf-m-sticky uses CSS position: sticky — it pins relative
to the nearest scroll container. If your banner doesn't stick, check that an ancestor has
overflow-y: auto or scroll.
Always set screenReaderText on status banners.
The visible icon communicates severity to sighted users; AT consumers can't see it. A short prefix ("Warning:", "Success:") gives them the same context.