Alert

Alert is an unobtrusive, yet highly visible way to display important information and provide feedback to user action.

Usage

Use to direct attention to notable information, or to give feedback after an action.

Example use cases:

• Show an alert after successful form submission.
• Direct to a part of the page that needs attention.
• Notify users of critical information.
• Inform a user with a dismissible Alert.

Guidelines

• Place above the main content of the page, but below the Masthead.
• Use a clear and concise message that communicates one piece of information per Alert.
• The message can contain a call to action through a link. Do not use buttons.
• Alerts can be permanent or dismissed. If dismissable, choose how long it will stay on the page and if it's dismissable through the Close Icon.
• Do not use on top of sidebars or narrow elements.

Variants

Information Alert

This alert has a Bell Icon with critical information. These alerts are typically already on the page when the user arrives.

Success Alert

This Alert has a Checkmark Icon and provides positive feedback to user action.

Fail Alert

This Alert has an Exclamation Icon with negative feedback to user action.

Anatomy

• Alert must have an Icon on the left side.
• Alert must have a clear, concise piece of text that may contain Links.
• Alert may have a Close Icon to dismiss the Alert.