Alert

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.

Alert component sample

There are two alert variants available for use.

Alert component blueprint

Inline

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.

Alert component, inline

Inline, alternate

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.

Alert component, inline alternate

Toast

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.

Alert component, toast

An alert is best used to notify a user of a change or attract their attention about other messages.

Inline

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.

Toast

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

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.

Learn more
Visit the Color foundation page to learn more about how to use colors for status and severity.

Alert component severity

Dismissal

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.

Warning
If an issue cannot be resolved on the current page or if a user needs to correct a situation outside of the experience, use a Modal instead.

Alert component dismissal examples

Inline

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.

Alert component positioning, inline (global)
Alert component positioning, inline (local)

Toast

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.

Toast alert component positioning, persistent

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.

Toast alert component positioning, temporary

Stacking

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.

Alert component behavior, stack
Alert component behavior, persistent

The close button and any linked content are the only interactive elements in both alert variants.

Link

Alert component interaction state, link

Hover

Alert component interaction state, hover

Focus

Alert component interaction state, focus

Active

Alert component interaction state, active
Key Action
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

Helpful tip
The maximum width of a Toast alert on large screens is six grid columns.

Large screens

Alert component responsive design, large screens

Small screens

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.

Alert component sample

Inline as Toast

Do not use an Inline alert to communicate messages about important events, updates, or confirmations.

Inline alert in the top right corner of a page

Toast as Inline

Do not use a Toast alert to present simple information or inline messages.

Toast alert positioned at the top of a page

Different variants

Do not use both variants when stacking.

Inline alert and Toast alert stacked on top of each other

Both Alert variants use PatternFly 4 spacers to define spacing values between elements.

Inline

Alert component spacing, inline

Toast

Alert component spacing, toast

Toast (in layout)

Alert component spacing in layout, toast

To give feedback about anything on this page or to request a new Component, contact us.

To learn more about how to use foundational elements, visit the Foundations section.