Skip to main content

Contextual alerts

Purpose

Users need to be aware of important information related to their current activity.

Description

  • Contextual alerts are positioned above the area or form they relate to
  • They are often triggered by a user interaction
  • They can be closable and can have other action buttons or links
  • Alerts with low importance (info or success) can close automatically after 20 seconds
  • Alerts with high importance (warning or danger) should not close automatically, unless the situation has been resolved in some other way

Types:

  • Info alerts should be used when there are tips or information that a user can benefit from
  • Success alerts should be used when an action was performed successfully
  • Warning alerts should be used when an action is out of the ordinary or might not be desired
  • Danger alerts should be used when the system has failed to perform an action, or when the user has made an error

Standard alerts

Example HTML usage: 
<!--Standard alerts-->
<div class="mb-2 alert alert-info" role="alert">
  <div class="alert-icon"><i class="material-icons">info</i></div>
  <div>
    <h4 class="alert-heading">Use appropriate heading level</h4>
    This is a info alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>
<div class="mb-2 alert alert-success" role="alert">
  <div class="alert-icon"><i class="material-icons">check_circle</i></div>
  <div>
    This is a success alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>
<div class="mb-2 alert alert-warning" role="alert">
  <div class="alert-icon"><i class="material-icons">warning</i></div>
  <div>
    This is a warning alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>
<div class="mb-2 alert alert-danger" role="alert">
  <div class="alert-icon"><i class="material-icons">error</i></div>
  <div>
    This is a danger alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>

Slim alert

Example HTML usage: 
<!--Slim alerts-->
<div class="mb-2 alert alert-info alert-sm" role="alert">
  <div class="alert-icon"><i class="material-icons">info</i></div>
  <div>
    This is a small info alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>

No icon alerts

Example HTML usage: 
<!--No Icon alerts-->
<div class="mb-2 alert alert-info" role="alert">
  <div>
    This is a info regular alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>
<div class="mb-2 alert alert-info alert-sm" role="alert">
  <div>
    This is a info slim alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
</div>

Dismissible alerts

If an Alert is informational only and does not contain information critical to the usage of the application, then it can be made dismissible.

Example HTML usage: 
<p>If an Alert is informational only and does not contain information critical to the usage of the application, then it can be made dismissible.</p>
<!--Dismiss alerts-->
<div class="mb-2 alert alert-info d-flex" role="alert">
  <div class="alert-icon"><i class="material-icons">info</i></div>
  <div class="flex-grow-1">
    <h4 class="alert-heading">Use appropriate heading level</h4>
    This is a info alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
  <div class="mb-auto">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</div>
<div class="mb-2 alert alert-info d-flex" role="alert">
  <div class="flex-grow-1">
    This is a info regular alert with
    <a href="#" class="alert-link">1an example link</a>.
  </div>
  <div class="mb-auto">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</div>
<div class="mb-2 alert alert-info alert-sm d-flex" role="alert">
  <div class="flex-grow-1">
    This is a info slim alert with
    <a href="#" class="alert-link">an example link</a>.
  </div>
  <div class="mb-auto">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
</div>

Inline Informational Messages

Purpose

Inline informational messages are used to present a local message or return feedback as the result of a user action.

Description

  • Inline informational messages are positioned inline near the specific content they relate to
  • They span the full-width of the section in which they relate to
  • They include a severity indicator (top-border bar)
  • They include a title and supporting text to add clarity or optional actions

Types:

  • Info messages should be used when there are tips or information that a user can benefit from
  • Success messages should be used when an action was performed successfully
  • Warning messages should be used when an action is out of the ordinary or might not be desired
  • Danger messages should be used when the system has failed to perform an action, or when the user has made an error
Example HTML usage: 
<div class="mb-2 alert alert-info inline" role="alert">
  <div>
    <h4 class="alert-heading">Information</h4>
    This is an inline informational message.
  </div>
</div>
<div class="mb-2 alert alert-success inline" role="alert">
  <div>
    <h4 class="alert-heading">Success</h4>
    This is an inline informational message.
  </div>
</div>
<div class="mb-2 alert alert-warning inline" role="alert">
  <div>
    <h4 class="alert-heading">Warning</h4>
    This is an inline informational message.
  </div>
</div>
<div class="mb-2 alert alert-danger inline" role="alert">
  <div>
    <h4 class="alert-heading">Danger</h4>
    This is an inline informational message.
  </div>
</div>

System notifications

Purpose

Users need to be aware of important information related to the system.

Description

  • System notifications appear in the top right corner of the screen
  • They are usually triggered by events unrelated to the user’s interactions
  • They can be closable and can have other action buttons or links
  • Notifications with low importance (info or success) can close automatically after 20 seconds (if desired)
  • Notifications with high importance (warning or danger) should not close automatically, unless the situation has been resolved in some other way

System notification

Example HTML usage: 
<!--System alert-->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Message sent</strong>
    <small>11 mins ago</small>
    <button
      type="button"
      class="ml-2 mb-1 close"
      data-dismiss="toast"
      aria-label="Close"
    >
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="toast-body">Message sent to Jerry.</div>
</div>