Alerts
Search the component library

Alerts

v2.0.4

Alerts interrupt users with urgent information, details, or actions. Use alerts judiciously and sparingly since they are disruptive. 

Global alerts

Use global alerts for time-sensitive messages that are dismissible. They can appear either statically when a page loads or dynamically in response to an action.

Positioning alerts

Position a global alert in the upper-left corner on desktop screens. This ensures that screen magnification users will notice it.

For narrower screens an alert takes up the full width.

Static global alert

When a message is displayed upon page load the alert will appear anchored in the upper left corner of the viewport or if on a mobile device the message will appear across the top of the viewport. (It will stay in place as the user scrolls the page.) 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.

Users can dismiss this type of alert by clicking the X close button.

An example use case for this type of alert would be when users click a confirmation link in their email and a new window appears confirming that their address has been verified.

Static global alert

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

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. For keyboard interactions, focus will automatically move from where the user is working to this element.

The following are some examples of when to use a dynamic global alert. 

If users:

  • Drop a student from a course roster, but the action fails due to a server error. 
  • Are copying a course (which continues in the background) while they are editing another course. (Use an alert to notify users when the course has been copied.)
  • Successfully edit an assignment, but due to backend limitations it will take one hour before the changes are available to students. (Use an alert to notify users about the time.)
  • Edit settings in an application and you need to remind them that these changes will not automatically propagate across other applications in the workflow.
Dynamic global alert

The animation for showing/dismissing a dynamic alert.

Inline alerts

Use inline alerts to apply to a specific task or section content that appears where the action occurred. These should only appear below the related content.

There are three types of inline alert messages:

  • Warning/error messages: Use for system errors or an incorrect user actions. If the user needs to take some action in response to the error make sure to clearly state that.
  • Success or confirmation messages: Use to tell user that a task has been completed successfully and that everything is working properly. For example, submitting a form, completing a quiz, etc.
  • Informational messages: Inform users about something relevant: to share tips or suggestions. For example: A message telling users that they haven't verified their email address yet.
Warning/Error alert
Success alert
Information alert

Dismissing alerts

By default, an inline alert is also dismissable, but it can be made to display permanently if the information contained is persistently useful. For example, a message telling users that they haven't verified their email address yet.

Important: Timeouts are not supported for this component.

A common pattern is to dismiss alerts after a set time. However, because many users need more time to notice, read, or interact with alerts, make sure that users can manually dismiss alerts.  

Inline alert

The example of message appear below the content area.

Redlines

Standard alert

DimensionsColor bar is 3px wide
At medium and larger breakpoints, vertical padding is 24px, left padding is 28px, right padding is 36px
At smaller breakpoints vertical padding is 20px and horizontal is 28px
ColorsError and warning color is Strawberry Red
Success and information color is Digital Marine Turquoise
Background is White
TypographyTitle is Bold UI Text
Message is Basic Body Copy
"X" iconsRemove-sm-24
Note the "-sm" size of this icon is actually 12px square
Touch area 44x44, positioned in the far upper right corner
Icon is 8px away from the top and right edges at medium and larger breakpoints, 4px at smaller
Variant iconsAlert/warning icon is warning-18
Success icon is check-lg-18
12px spacing between the icon and the text area
Focus BehaviorMost 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

Global alerts

Dimensions580px wide at medium and larger breakpoints
440px wide at small breakpoints
100% width at extra small
Positioning32px down and right from the top left viewport corner at small and larger breakpoints
36px from the top with 24px horizontal margins at extra small breakpoints
Animation (for Dynamic Global)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

Popover alerts

Inline alerts

DimensionsAt medium and large breakpoints, should have a min width of 440px, may expand to fit the content area
100% of content area at smaller breakpoints
PositioningLeft aligned within content area

Content (task) level alert

Changelog

2.0.4

  • CHANGED: Documentation to be clearer about positioning and timeout rules and explain the accessibility considerations in more detail

2.0.3

  • ADDED: Feature links

2.0.2

  • TWEAKED: Copy in the dynamic alert animation

2.0.1

  • FIXED: Inconsistencies in the redlines

2.0.0

  • First rebranded version