Red Hat design system

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 element

Demos

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

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

<script type="module">
  import '@rhds/elements/rh-alert/rh-alert.js';
  import '@rhds/elements/rh-button/rh-button.js';
</script>