Alert group
An alert group is used to stack and position alerts in a layer over the main content of a page. This component is mainly used for positioning toast alerts. Related design guidelines: Alerts and notifications
ExamplesDocumentationCSS VariablesExamples
Basic
-
Success alert:Success alert title
-
Danger alert:Danger alert title
Overview
.pf-c-alert-group is optional when only one alert is needed. It becomes required when more than one alert is used in a list.
Usage
| Attribute | Applied to | Outcome |
|---|---|---|
.pf-c-alert-group | <ul> | Creates an alert group component. Required |
.pf-c-alert-group__item | <li> | Creates an alert group item. Required |
Overview
An alert group that includes the .pf-m-toast modifier becomes a toast alert group with unique positioning in the top-right corner of the window. .pf-c-alert-group is required to create a toast alert group.
Every toast alert must include a close button to dismiss the alert.
Modifiers
| Class | Applied to | Outcome |
|---|---|---|
.pf-m-toast | .pf-c-alert-group | Applies toast alert styling to an alert group. |
Documentation
Overview
Alert groups are used to contain and align consecutive alerts. Groups can either be embedded alongside a page's content or in the top-right corner as a toast group using the .pf-m-toast modifier.
CSS Variables
| .pf-c-alert-group | --pf-c-alert-group__item--MarginTop | 0.5rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--Top | 3rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--Right | 2rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--MaxWidth | 37.5rem | ||
| .pf-c-alert-group | --pf-c-alert-group--m-toast--ZIndex | 600 | ||
