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

OverviewStyleGuidelinesAccessibilityExamples
AuthoringImplementationAuthoringImplementation

Toasts can be easy to miss when they time out or sit outside a magnified region. Before shipping this in production, review toast's accessibility guidelines and Accessible notifications and messages in Github's design system, Primer.

Authoring 

import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';

RhAlert.toast({
  state: 'caution',
  message: 'Toast alerts using JavaScript',
});

Use the JavaScript API to show toast alerts.

 
<rh-alert variant="toast">
  <p>Writing toast alerts explicitly in HTML</p>
</rh-alert>

Write toast variant alerts in HTML.

View the toast demo on the <rh-alert> Demos page to see a full-featured toast demo.

Implementation

The toast variant is only for toasts created through the API. Call the static toast() method on RhAlert. Avoid hand-authored <rh-alert variant="toast"> in HTML. The argument is an object with at least message, plus optional fields below.

import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';

RhAlert.toast({ state: 'success', message: 'Saved!' });

The full list of options for the toast method is:

Option Type Description
message (required) lit-html renderable value Alert body content. Can be any value which lit-html can render. Simple strings are preferable
heading string Alert heading content. Must be a simple string.
state See alert's state attribute Alert state attribute
persistent boolean Whether the alert should remain on screen until the user explicitly dismisses it
actions Array of one or two actions objects One or more optional body actions. See actions options info below.

Toast action options

Actions objects have two keys, text for the action button text, and action e.g. dismiss or confirm, which is applied to the close event as the action property.

Option type Description
text string Button label text, e.g. "Confirm"
action string close event event.action property e.g. 'confirm'

Toast alert content

When you call RhAlert.toast(), you must provide body content for the alert. This content can either be a string, a DOM node, a lit-html TemplateResult, or an array of the same.

String message 

await RhAlert.toast({
  message: 'Your request was submitted',
});

DOM node 

const message = document.createElement('strong');
      message.textContent = 'Your request was submitted';
await RhAlert.toast({ message });

lit-html template 

import { html } from 'lit';
await RhAlert.toast({
  message: html`Your request was <em>submitted</em>`,
});

Array of renderables 

import { html } from 'lit';
await RhAlert.toast({
  message: [
    'Your request was',
    html`<em>successfully</em>`,
    new Text('submitted'),
  ],
});

You may, for example, use the <template> element to define alert content

<template id="success-alert-content-template">
  <p>Your subscription has been successfully renewed.</p>
  <p>Contact <a href="#">Customer support</a> for more information.</p>
</template>
const template = document.getElementById('success-alert-content-template');
const { childNodes } = template.content.cloneNode(true);
const message = Array.from(childNodes);
await RhAlert.toast({ message });

Alert headings

You can provide an optional string for the alert's heading, which will become the text content of the alert's slotted heading (h3).

import { RhAlert } from '@rhds/elements/rh-alert/rh-alert.js';

await RhAlert.toast({
  state: 'success',
  heading: 'Subscription renewed',
  message: 'Your subscription was successfully renewed',
});

Persistent toast alerts

Toast alerts can be timed or persistent. Timed alerts remain on screen for eight seconds before disappearing. Persistent alerts remain on screen until the user explicitly dismisses them. To make your toast alert persistent, use the persistent: true option.

import { html } from 'lit';

await RhAlert.toast({
  state: 'warning',
  persistent: true,
  message: html`Your subscription will expire in <time>two days</time>`,
});

Toast alert actions

Like inline alerts, toast alerts may include one or two actions. When there are two actions, the first will be a secondary variant button, and the second a link variant button. If there is only one action, it will be a link button.

Responding to actions

Actions have a button text and an action string, which identifies which button was pressed. You can listen for the close event, and if it is an AlertCloseEvent object, it will have an action property.

import { AlertCloseEvent } from '@rhds/elements/rh-alert/rh-alert.js';

document.addEventListener('close', function(event) {
  if (event instanceof AlertCloseEvent) {
    switch (event.action) {
      case 'renew':
        // renew subscription
        break;
    }
  }
});

await RhAlert.toast({
  state: 'warning',
  message: 'Your subscription is about to expire',
  actions: [
    { text: 'Renew', action: 'renew' },
    { text: 'Dismiss', action: 'dismiss' },
  ]
});

By default, clicking on an action button will remove the alert. If you would like to keep the alert on screen, prevent the default action:

document.addEventListener('close', function(event) {
  if (event instanceof AlertCloseEvent) {
    switch (event.action) {
      case 'prevent':
        // prevent alert from closing
        event.preventDefault();
        // ... do something with event
        break;
    }
  }
});

Other libraries

To learn more about our other libraries, visit the getting started page.
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify