Alerts
Search the component library

Alerts

v2.0.4

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

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.

Features

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

Global Alert

The global alert can appear either statically on page load or dynamically in response to use action.

Global alert positioning

The global alert is positioned in the upper left corner on desktop screens.

This ensures the alert is noticeable for screen magnification users.

For narrower screens the alert takes up the full width.

Static global alerts

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.

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 a new window 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 alerts

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.

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.
Dynamic Global Alert

The animation for showing/dismissing a dynamic alert.

Inline Alert

The alert that applies to a specific task or section content will be displayed where the action occurred. These should only appear below the related content to preserve reading order.

Dismissing

By default the inline alert is also dismissable, but it can be made to display permanently if the information contained is persistently useful. An example would be a message saying that an email address hasn’t been confirmed yet.

Inline Alert

The example of message appear below the content area.

Timeouts

A common pattern with alerts like this is to have the alert automatically dismiss itself after a set timeout. This can be problematic from an accessibility perspective, however, as users may need more time to notice, read, or interact with the alert. For this reason the alert component only supports manual alert dismissal.

Variants

Warning/Error
  • Use for negative messages such as a system error or an incorrectly user action
  • If the user needs to take some action in response to the error make sure to clearly state that.
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
Information
  • Use to inform the user about something relevant: to share tips or suggestions.
  • Example: Informing users that an email address hasn’t been verified yet
Warning/Error Alert
Success Alert
Information Alert

Redlines

Basic alert

Dimensions
  • Color 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
Colors
Typography
“X” icons
  • Remove-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 icons
  • Alert/warning icon is warning-18
  • Success icon is check-lg-18
  • 12px spacing between the icon and the text area
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

Global alerts

Dimensions
Positioning
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

Dimensions
Positioning
  • Left aligned within content area

Content (task) level alert

Changelog

2.0.4

Parker Malenke

  • 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