Alert
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.
Status
- Figma library:
Ready - RH Elements:
Ready - WebRH:
Ready
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>
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
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| WebRH |
|
Component is available in the WebRH repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
