Alerts

v2.0.0-beta.3

Download UI Kit v1.9.0

Presents important feedback or information to users either in response to their actions or upon page load.

Download UI Kit v1.9.0

Usage Guidelines

Use global alerts for messages which are time sensitive but dismissible. The inline alerts may be used in this manner, or to provide more persistent information that relates to a particular region of the page.

Static Global Alert
Dynamic Global Alert
Inline Alert
Variants
Redlines
Changelog

Features

Both global and inline styles
Option for dynamic animation in response to user action
Error, information, and confirmation styles

Dependencies

Colors v2.1.0

Typography v2.0.0

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

Static Global Alert

When a message is displayed upon page load the alert will appear statically in the upper left corner of the viewport or if on a mobile device the message will appear across the top of the viewport. Text in the upper left corner of desktop devices (rather than center) will help ensure screen magnification users do not miss the message upon page load.

This type of alert can always be dismissed by clicking on the close icon.

An example use case for this type of alert would be when the user clicks a confirmation link in their email which loads

The message should appear in the upper corner as part of the normal page load.

At responsive sizes the alert occupies the top part of the viewport.

Responsive popover alert.

Dynamic Global Alert

Alerts can also appear dynamically in response to user actions like submitting a form, choosing an option, or completing an assignment. In this case the alert will animate down from the top.

Try to use this alert style sparingly, as it is fairly interruptive.

Example use cases which justify this alert style include:

A user drops a student from a course roster, but the action fails due to a server error.
A user initiates a course copy action, which proceeds in the background while they go edit another course. A dynamic alert notifies them when the task finishes.
A user successfully edits an assignment, but due to backend limitations must be informed that it will take one hour before the changes are available to students.
A user edits some settings in one application and needs to be reminded that these changes will not automatically propagate to separate applications that are used as part of the same flow.

The animation for showing/dismissing a dynamic alert.

Inline Alert

The alert that applies to a specific task or section content will be displayed above or below where the action occurred.

The example of message appear below the content area.

Example of responsive version content level alert.

Variants

Warning

Use when an error occurred that cannot be resolve on the user end.
Use when an issue that may or may not cause problems for the users, but the user should know about.
Example: System alert

Error

Use to let user know that something has gone wrong and it needs to be resolved to complete the task. IT can also provide suggestions on how to proceed.
Use to communicate an unsuccessful action
Example: Form Error, login error, search error.

Success

Use to tell user that a task has been completed successfully.
Use to let user know that everything is working property.
Example: Submitting a form, completing a quiz
The success alert can be closed to save screen estate.

Information

Use to inform the user about something relevant: to share tips or suggestions.
Use to let user know that everything is working property.
Example: Information about the specific content
The information alert can be closed to save screen estate.

Redlines

Dimensions

Color bar is 3px high
Horizontal and bottom padding is 28px (desktop)

Colors

Error and warning color is Strawberry Red
Success and information color is Digital Marine Turquoise
Background is White

Typography

Title is Bold Text
Message is Basic Body Copy

“X” icons

Size remove-sm-24
Touch area 44x44

Alert/warning icons

alert/warning icon warning-sm-18
success icon check-sm-18

Animation

Drop in uses an ease-in-out easing curve with a duration of 300ms
Slide out uses an ease-in easing curve with a duration of 200ms

Focus Behavior

Most alerts can just be announced by using ARIA alert roles and don’t need special focus treatment
If an alert is particularly important, focus should be moved to the first element of the alert (and restored to it’s original position upon dismissal)
Statically presented alerts should just be read and focused in the normal flow of the document