Skip to main content Red Hat Design System logo Contribute on Github

Alert

Overview Style Guidelines Code Demos Accessibility

Style

An alert contains title text with an icon, body text, and a close button. They may also include action buttons below the text or inline links. There are two variants, toast and inline, which serve different purposes.

Anatomy

Alert with numbers pointing to parts of the element
  1. Severity indicator
  2. Severity icon
  3. Title
  4. Body
  5. Actions
  6. Close button

Variants

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.

Two examples of an inline alert\

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.

Two examples of an alternate design for inline alerts

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.

Two examples of a toast alert

Interaction states

Interaction states are visual representations used to communicate the status of a component or element. The close button and any linked content are the only interactive elements in both alert variants.

Hover

Examples showing hover state

Focus

Examples showing focus state

Active

Examples showing active state

Spacing

Inline

Diagram of spacing for inline alerts

Toast

Diagram of spacing for toast alerts
Example Token Description
8 --rh-space-md 8px spacer
16 --rh-space-lg 16px spacer
24 --rh-space-xl 24px spacer

Toast (stacked)

Diagram of spacing between stacked toast alerts
© 2021-2024 Red Hat, Inc. Deploys by Netlify