An Alert is a banner used to notify a user about a change in status or communicate other information. It can be generated with or without a user triggering an action first.
There are two alert variants available for use.
The required elements of an Inline alert are a thin top bar or thin border, icon, title, close button, and a container background. Supporting text and buttons may or may not be included below the title to add clarity or optional actions.
The alternate Inline alert style includes a border instead of a line which can be used to express more urgency or better grab the attention of a user.
The required elements of a Toast alert are a thin top bar, icon, title, close button, and a white container with a subtle drop shadow. Supporting text and buttons may or may not be included below the title to add clarity or optional actions.
An alert is best used to notify a user of a change or attract their attention about other messages.
An Inline alert is used to present a local message or return feedback as the result of a user action, like if a form is submitted with errors.
A Toast alert is used to present a global message about an event, update, or confirmation, like the result of a user action that cannot be presented within a specific layout or component.
Severity communicates the urgency of a message and is denoted by various styling configurations.
- Default - Indicates generic information or a message with no severity.
- Info - Indicates helpful information or a message with very little to no severity.
- Success - Indicates a success state, like if a process was completed without errors.
- Warning - Indicates a caution state, like a non-blocking error that might need to be fixed.
- Danger - Indicates a danger state, like an error that is blocking a user from completing a task.
Alert variants have different rules regarding their ability to be dismissed by a user.
- Default, Info, and Success Inline alerts can be dismissed by a user selecting the close button.
- Warning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert.
- All Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out.
An Inline alert can be placed toward the top of a layout if the message applies globally or inline near specific content if the message applies locally. Depending on where they are used, an Inline alert can span the width of a grid or container, so there is no set width.
A Toast alert slides in from the top right edge of the screen and overlaps any content underneath. They can be set as persistent or temporary depending on the message that needs to be communicated to a user.
- Persistent - Set if the content will be relevant after a task is complete.
- Temporary - Set if the content will be be acknowledged and no longer relevant.
If a Toast alert is set to persistent, a close button needs to be included so a user can dismiss the alert if desired.
If a Toast alert is set to be temporary or time out, the alert will disappear after eight seconds. A user might want to dismiss the alert before then, in which case a close button needs be included.
When multiple Toast alerts are triggered around the same time, they will stack on top of each other. The most recent alert is placed at the top of the stack and pushes the other alerts down. When stacked Toast alerts are dismissed by a user or time out, the remaining alerts will slide up and fill the empty space.
The close button and any linked content are the only interactive elements in both alert variants.
|Tab||Moves the focus to the Close button or to the next interactive element|
|Shift + Tab||Moves the focus outside of the component or to the previous interactive element|
|Enter||Selects the Close button or button link with focus|
On small screens, both alert variants will span the full column of the layout. Toast alerts will continue to stack on top of each other, so be mindful of how much vertical space the group will occupy if multiple Toast alerts need to be displayed.
Inline as Toast
Do not use an Inline alert to communicate messages about important events, updates, or confirmations.
Toast as Inline
Do not use a Toast alert to present simple information or inline messages.
Do not use both variants when stacking.
Both Alert variants use PatternFly 4 spacers to define spacing values between elements.