Examples
Alert variants
The five PF variants — info, success, warning, danger, custom.
info alert: Info alert
success alert: Success alert
warning alert: Warning alert
danger alert: Danger alert
custom alert: Custom alert
Alert variations
Title + description + action links + close, and reduced combinations.
success alert: Success alert with everything
A description paragraph adds detail below the title.
success alert: Success alert with description
Title plus description only.
success alert: Success alert title only
With description
A description paragraph below the title.
info alert: With description
A second line of explanatory text under the title. Use this to add detail beyond the headline.
Inline
pf-m-inline for alerts embedded in page content.
warning alert: Inline alert
Inline variant — sits inside content blocks without the boxed treatment.
With action links
Link buttons in the __action-group.
Alert timeout
Added alerts remove themselves after 8 seconds.
-
info alert: This alert times out in 8 seconds.
Truncated alerts
pf-m-truncate on the title clamps it to one line.
info alert: Really long info alert title that will be truncated to a single line by the pf-m-truncate title modifier no matter how much text keeps going and going and going
Custom icons
Any icon via the customIcon param.
success alert: Success alert with a custom rocket icon
warning alert: Warning alert with a custom clock icon
Plain inline alert variants
pf-m-inline pf-m-plain — no background.
info alert: Plain inline info alert
success alert: Plain inline success alert
danger alert: Plain inline danger alert
Static live region alerts
An aria-live="polite" wrapper announces updates without moving focus.
info alert: Static live region alert
Screen readers announce updates to this region without moving focus.
Static inline alert group
pf-v6-c-alert-group stacking inline alerts.
success alert: Success alert
info alert: Info alert
warning alert: Warning alert
Toast alert group with overflow capture
At most 4 toasts show; the rest collapse behind a "View N more" overflow button.
Async live region alerts
A toggle starts an interval that prepends an info alert every 4.5 seconds.
-
info alert:
Dynamic alert group with overflow
An inline dynamic group shows at most four alerts; the rest collapse behind a "View N more alerts" message.
Multiple dynamic alert groups
One click prepends a collection of three toasts — success, warning, danger — each dismissable.
Async alert groups
Start/Stop drive an interval that prepends dismissable danger toasts into an assertive live region.
-
danger alert:
Toast alerts with notification drawer
Variant buttons spawn toasts (three visible, the rest behind a "View N more" overflow) while every notification also lands in the drawer, toggled by the badge.
Notifications
0 unread-
-
No notifications yet.
Documentation
Alert props
Parameters accepted by
{#include components/feedback/alert ... /}. Model mode: pass
alert=<Alert> built in Java instead — the Java tab on each example shows the
builder.
| Name | Type | Description |
|---|---|---|
* id
|
String | DOM id. |
* variant
|
info | success | warning | danger | custom
|
Severity — emits pf-m-{variant} + the matching icon.
|
* title
|
String | Main alert headline. |
description
|
String | Secondary line of text. |
inline / plain /
expandable / closable
|
boolean | Modifier flags — emit matching pf-m-* classes; closable adds a dismiss button. |
hasActionLinks + {#actionLinks}
|
boolean + Slot |
Set hasActionLinks=true and fill the
{#actionLinks} slot to render PF's
AlertActionLink footer. Compose link-variant
Button components.
|
Usage
Pick the variant by severity. Success after completion, info for context, warning before destructive actions, danger after failures. Custom for app-specific colors.
Alert vs. Banner vs. Toast. Alert sits inside content; Banner is global / persistent at the top of the page; a toast is dismissable + temporary (often built on Alert + auto-dismiss timer).