Alerts

Best Practices

• Put Alerts at the top of the page, under the Page Title.
• Alerts use the Status Colors for their colors and meaning.
• Status Colors only add visual cues. The content of the Alert must make the meaning obvious to assistive technology users.
• Use Info (Blue) to communicate informative or helpful information to users.
• Use Success (Green) to provide feedback to the user indicating an action is successful.
• Use Warning (Yellow) to indicate an unintended, but not dangerous, effect.
• Use Danger (Red) to indicate an action will cause data loss, error, or other hard-to-reverse effects.
• Use the icons provided for each Alert type.

When writing Alerts, keep the following in mind:

• Be clear and specific.
• Use Plain Language, not technical jargon.
• Do not blame the user.
• Avoid negative language.
• Avoid using all uppercase letters unless you are using Acronyms.
• Provide useful information.
• See Voice and Tone for more information.

Usage

Info Alert

<div class="alert alert-info alert-dismissable fade show" role="alert">
  <span class="alert-icon fas fa-info-circle" aria-hidden="true"></span>
  <strong>Info.</strong> Hey, User, you might find this nice.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span class="fas fa-times" aria-hidden="true"></span>
  </button>
</div>

Success Alert

Note: A successful action can include the successful deletion of an item or file.

<div class="alert alert-success alert-dismissable fade show" role="alert">
  <span class="alert-icon fas fa-check-circle" aria-hidden="true"></span>
  <strong>Success!</strong> Hey, User, the thing worked.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span class="fas fa-times" aria-hidden="true"></span>
  </button>
</div>

Warning Alert

<div class="alert alert-warning alert-dismissable fade show" role="alert">
  <span class="alert-icon fas fa-exclamation-circle" aria-hidden="true"></span>
  <strong>Warning!</strong> Uh, User, you need to know this!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span class="fas fa-times" aria-hidden="true"></span>
  </button>
</div>

Danger Alert

<div class="alert alert-danger alert-dismissable fade show" role="alert">
  <span class="alert-icon fas fa-exclamation-triangle" aria-hidden="true"></span>
  <strong>Danger!</strong> Whoa, User! Bad things could happen!
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span class="fas fa-times" aria-hidden="true"></span>
  </button>
</div>

Resources

• Bootstrap Documentation - Alerts