Alert
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Usage
<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="secondary" data-action="confirm">Confirm</rh-button>
<rh-button slot="actions" variant="link" data-action="dismiss">Cancel</rh-button>
</rh-alert>
<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
import '@rhds/elements/rh-button/rh-button.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-alert
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.
Slot Name | Description |
---|---|
|
Provide a description for the alert message |
header |
Provide a header for the alert message. |
actions |
Provide actions that the user can take for the alert |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
state |
state |
Communicates the urgency of a message and is denoted by various styling configurations.
|
|
|
variant |
variant |
The alternate Inline alert style includes a border instead of a line which can be used to express more urgency or better grab the attention of a user. A Toast alert is used to present a global message about an event, update, or confirmation, like the result of a user action that cannot be presented within a specific layout or component. |
|
|
dismissable |
dismissable |
Alert variants have different rules regarding their ability to be dismissed by a user. Default, Info, and Success Inline alerts can be dismissed by a user selecting the close button. Warning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert. All Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out. |
|
|
Event Name | Description |
---|---|
close |
when the dismissable alert closes |
Token | Copy |
---|---|
--rh-border-width-md
|
|
--rh-box-shadow-xl
|
|
--rh-color-icon-status-caution
|
|
--rh-color-icon-status-danger
|
|
--rh-color-icon-status-info
|
|
--rh-color-icon-status-neutral
|
|
--rh-color-icon-status-success
|
|
--rh-color-icon-status-warning
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-status-caution
|
|
--rh-color-status-danger
|
|
--rh-color-status-info
|
|
--rh-color-status-neutral
|
|
--rh-color-status-success
|
|
--rh-color-status-warning
|
|
--rh-color-surface-lightest
|
|
--rh-color-surface-status-caution
|
|
--rh-color-surface-status-danger
|
|
--rh-color-surface-status-info
|
|
--rh-color-surface-status-neutral
|
|
--rh-color-surface-status-success
|
|
--rh-color-surface-status-warning
|
|
--rh-color-teal-10
|
|
--rh-color-teal-50
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-weight-body-text-medium
|
|
--rh-font-weight-body-text-regular
|
|
--rh-length-xl
|
|
--rh-line-height-body-text
|
|
--rh-size-icon-02
|
|
--rh-space-lg
|
|
--rh-space-xl
|
|
--rh-space-xs
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.