Alerts ​

The alert component provides a set of classes to highlight messages that readers need to see, such as a warning or a change that affects their next step.

Base classes ​

Wrap the message in .alert and put its main content in .alert-body. Use .alert-header with .alert-title for an optional title, and .alert-footer for a follow-up action or additional information.

To make an alert dismissible, add a button with the .alert-dismisser class and an accessible name. Once initialized, the alert can be dismissed by clicking the button or pressing Enter or Space while it has focus.

Initialization ​

Run the alert generator after the markup is in the DOM.

import generateAlerts from "@graupl/core/alert/generator";

generateAlerts();

The alert is visible by default. To start with the alert hidden, add .hide and set data-graupl-alert-options='{"expanded":false}' on the alert. The component uses .show, .hide, and .transitioning to manage visibility and transitions.

Variants ​

There are three alert variants provided by default. Add .primary, .secondary, or .tertiary alongside .alert.

If you are compiling your own version of Graupl, you can set the alert module’s $themeable variable to false to skip generating theme variants.

Custom Properties ​

The following custom properties can be used to customize the alert component:

Sass variables ​

The following Sass variables can be used to customize the generation of the alert component: