Alert

There are two alert variants available for use.

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.

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.

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.

Responsive design

Helpful tip

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

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.

Spacing

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

Inline

Toast

Toast (in layout)