Alert
Installation
Learn more about how to install on our getting started docs.
<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
</script>Import Map Example
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
}
}
</script>npm install @rhds/elements<script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
</script><script type="module">
import '@rhds/elements/rh-alert/rh-alert.js';
</script>Import Map Example
<script type="importmap">
{
"imports": {
"@rhds/elements/rh-alert/rh-alert.js": "./elements/rh-alert/rh-alert.js"
},
"scopes": {
"./": {
"@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
"@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
"@rhds/elements/lib/context/color/provider.js": "./lib/context/color/provider.js",
"@rhds/elements/": "./elements/",
"@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
"@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
"lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
"lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
"tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
},
"https://ga.jspm.io/": {
"@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
"@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
"@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
"lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
"lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
"lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
"lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
"tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
}
}
}
</script>rh-alert
| 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 |
| DOM Property | Description | Type | Default |
|---|---|---|---|
state |
Communicates the urgency of a message and is denoted by various styling configurations.
|
|
|
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 |
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. |
|
|
None
| Event Name | Description |
|---|---|
close |
when the dismissable alert closes |
None
None
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
