Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Alert

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

An alert provides a banner for status changes or messages. It uses ARIA role="alert" so screen readers must announce its content. Authors should provide a heading and must avoid nesting alerts. Users may Tab to interactive elements and press Enter to activate them. Meets WCAG 2.4.3.

import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
 
<rh-alert>
  <h3 slot="header">Default</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
    egestas, a sollicitudin mauris tincidunt.</p>
  <rh-button slot="actions" variant="secondary" data-action="confirm">Confirm</rh-button>
  <rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
</rh-alert>
 
import { Alert } from "@rhds/elements/react/rh-alert/rh-alert.js";
import { Button } from "@rhds/elements/react/rh-button/rh-button.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Alert>
    <h3 slot="header">Default</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend elit sed est
      egestas, a sollicitudin mauris tincidunt.</p>
    <Button slot="actions" variant="secondary" data-action="confirm">Confirm</Button>
    <Button slot="actions" variant="link" data-action="dismiss">Cancel</Button>
  </Alert>
);

Communicates the urgency of a message and is denoted by various styling configurations.

  • neutral - Indicates generic information or a message with no severity.
  • danger - Indicates a danger state, like an error that is blocking a user from completing a task.
  • warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
  • caution - Indicates an action or notice which should immediately draw the attention
  • 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.

Note: 'note', 'default', and 'error' will also work, but are deprecated

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.

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. Toast alerts often appear away from what triggered them, may time out, automatically, and can be hard to discover in linear reading order. Toast alerts pose significant accessibility concerns and are not recommended for use.

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.

 View source on GitHub

Status

When to use

  • Communicate essential information in a prominent way
  • Notify a user of a change in status
  • Communicate urgency using severity

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify