Alert

Display info, success, warning and error messages.

Usage

To apply this component, add the gls-alert attribute to a block element.

<div gls-alert role="alert"></div>

Guidelines

When to use

• To notify users about system status including error, warnings, and updates.
• To notify users they’ve successfully completed a task
• Use along with inline validation alerts to summarize multiple errors on longer forms

When to use something else

• When it’s necessary to interrupt the user’s work flow.
• When user input/action is required to continue working
• If action taken by the user will result in losing/destroying their work, use a modal dialog that allows the user to confirm the destructive action.

Accessibility

• Alerts should use the role="alert" attribute
• Alerts that have a dismiss or close button should use the role="alertdialog" attribute
• Use the aria-labelledby attribute to link the alert title with the alert element
• Dynamically rendered alerts are automatically announced by most screen readers, but it’s important to note that screen readers will not inform users of alerts that are present before a page has finished loading

Microcopy notes

• Alert title should be clear and concise. “Success!” rather than “Application was submitted successfully!"
• Alert message should be descriptive and should clearly articulate the problem the user has encountered or the information you are trying to convey to the user. “The user ID and password you entered do not match” is more clear than “Unauthorized”.
• Where appropriate, alert title should be a link to the position on the page where the invalid element can be found.
• Alert message should offer next steps where appropriate.

Close button

To create a close button and enable its functionality, add the .gls-alert-close class to a <button> or <a> element inside the alert box. To apply a close icon, add the gls-close attribute from the Close component.

<div gls-alert role="alertdialog">
    <a class="gls-alert-close" gls-close></a>
</div>

Style modifiers

There are several style modifiers available. Just add one of the following classes to apply a different look.

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

animation is the Primary option and its key may be omitted, if it’s the only option in the attribute value.

<span gls-toggle=".my-class"></span>

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.alert(element, options);

Events

The following events will be triggered on elements with this component attached:

Methods

The following methods are available for the component:

Close

Gloss.alert(element).close();

Closes and removes the Alert.