Alert

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-alert/rh-alert.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-alert/rh-alert.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.9/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.13/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.9/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@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": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.1/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap 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 Wrap 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 Wrap 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.

Slots 3
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
Attributes 3
Attribute DOM Property Description Type Default
state state

Communicates the urgency of a message and is denoted by various styling configurations.

  • neutral - Indicates generic information or a message with no severity.
  • danger - Indicates a danger state, like an error that is blocking a user from completing a task.
  • warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
  • caution - Indicates an action or notice which should immediately draw the attention
  • info - Indicates helpful information or a message with very little to no severity.
  • success - Indicates a success state, like if a process was completed without errors.
 
| 'danger' | 'warning' | 'caution' | 'neutral' | 'info' | 'success' | 'note' // deprecated | 'default' // deprecated | 'error'
 
'neutral'
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.

 
'alternate' | 'toast' | 'inline' | undefined
 
unknown
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.

 
boolean
 
false
Methods 0
None
Events 1
Event Name Description
close

when the dismissable alert closes
CSS Shadow Parts 0
None
CSS Custom Properties 0
None
Design Tokens 37
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
Edit this page on GitHub