Skip to main content

Alert

Description​

Alerts provide instructive or urgent information above relevant content. They can appear at the page level above the H1, or component level (e.g., in a card or slideout, or immediately above any relevant content.

There are four alert types: Info, Success, Caution, and Error.

Alerts do not overlay content.

Usage​

Content​

Alerts contain text that instructs or warns the user. An optional underlined text link provides a means to respond to the alert.

Brevity is strongly advised. Users may not read alerts that exceed two lines in a 960px wide layout. Messages should aim for a seventh-grade reading level or lower, measured by the Flesch-Kincaid Readability Scale. You can test your message at www.perrymarshall.com/grade/.

Titles​

Alerts may have an optional title. Titles should be very brief and avoid wrapping.

Avoid explaining what to do and instead provide an informative and scannable title limited to three or four words.

Layout​

An alert appears above the content area it pertains to and spans the same horizontal space. Alerts must have a minimum of 16px clear space on all sides.

Coming Soon: Example of page level alert above H1 and Example of alert within a contained section of a page

Types​

Info​

Use the info alert to display instructional information.

The info alert is the only type that may have an optional close function. If closed, the alert fades out in 250ms and content below collapses up.

Coming Soon: do/do not example

Success​

Use the success alert to confirm that a user’s intended action has been successfully completed.

The success alert persists for five seconds and then fades out in 500ms, offering the user optimal time to read the alert message without requiring them to take an unnecssary action (such as close or use a "Got it" buttion). Once this message fades out, the content below is collapsed up.

Coming Soon: do/do not example

Caution​

Use the caution alert to advise the user of important information that can impact their ability to conduct business or use the system. This includes system availability or maintenance, or user actions that are strongly advised for or against.

The caution alert persists until the system withdraws the alert and then is hidden on the next page load.

Coming Soon: do/do not example

Error​

Use the error alert to advise that a system error or failure has occurred, or that a user has submitted invalid information, or that the user cannot currently conduct business as usual (e.g., an account problem).

The error alert persists, and the user cannot proceed until the error is corrected by the user or the system.

Error messages should be simple and direct, preferably actionable, written in a language that is easy to read and quick to comprehend.

Coming Soon: do/do not example

Best Practices​

Content​

Alerts should leave users feeling informed, supported, and reassured. Convey the appropriate level of urgency and make sure they understand how to respond.

  • Avoid obscure codes, jargon or abbreviations and ambiguity
  • Provide concise, clear descriptions that are useful to the user
  • Include the reason for the alert and the potential problem, how someone should act, and what happens if they don’t act
  • Avoid negative words, and language that blames the user
  • Avoid oops, whoops and other cutesy language

Coming Soon: do/do not alert label examples