Refine By

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.

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.

 

Style

 

 

             

Related Elements

Related Components

Version History

Date/Time of ChangeWho Made the ChangeChange Details
May. 08 2017 5:24pm Initial content entry