Alerts

Contents:

Alerts are used to warn a user about an unexpected change in state.
Unlike errors, alerts can be bypassed to continue a transaction without taking a remedial action.
Alerts can be embedded within a view or presented in an info modal.

Download UI Kit

Guidelines

Keep alert messaging as concise as possible.
Style alerts to stand out within the view so that the user can easily take notice.
Position alerts at the top of the view or in a modal where they will stand out the most.

Provide an option for the user to easily dismiss an alert.
Observe standard UX guidelines for info modals when using them to present alerts.

Accessibility

Do not visually hide alert messages on the page and then make them visible when they are needed. Users of older assistive technologies may still be able to perceive the alert messages even if they are not currently applicable.

As you use and customize this element, ensure it continues to follow the Accessibility 101 guidelines.