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


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>

<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