Alert

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

Usage

Alert is used when you need to give information to the user or feedback after an action. For example, to show that a form submission was successful or to let the user know that their attention is needed on another section of the site. Alert may have timed visibility (10 seconds) and/or be dismissed by the user by clicking or tapping the Close Icon.

Guidelines

• Alert must appear above the main content of the page, but below the Masthead.
• The message text of Alert should be clear and concise.
• Alert should not be used at the top of sidebars or other narrow layout elements.

Variants

Information Alert

An Information Alert has a Bell Icon and indicates that a message is important for the user to read. These alerts are typically already on the page when the user arrives.

Success Alert

A Success Alert has a Checkmark Icon and provides positive feedback to a user’s action.

Fail Alert

A Fail Alert has an Exclamation Icon and provides negative feedback to a user’s 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.