Alert

Overview Style Guidelines Code Accessibility

Overview

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.

Sample component

Two examples of the alert element

Demos

View a live version of this component and see how it can be customized.

<rh-alert state="default">
 <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" data-action="dismiss">Dismiss</button>
  <button slot="actions" data-action="confirm">Confirm</button>
</rh-alert>

<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-alert.js"></script>

 View the <rh-alert> demo in a new tab

When to use

  • When additional information needs to be emphasized
  • When a user needs to be notified after performing an action
  • When the severity of a message needs to be indicated
© 2021-2023 Red Hat, Inc. Deploys by Netlify
Scroll back to the top