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 5 seconds (if desired)
  • 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.
Example & Code
Press the 'A' key to automatically assign a case.
Case assigned to Jerry.
There are more than 10 cases assigned to John.
Please fix the 3 errors. 

<div class="alert alert-info">
    <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <span class="icon icon-info"></span> Press the <strong>'A'</strong> key to automatically assign a case.
</div>

<div class="alert alert-success">
    <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <span class="icon icon-check"></span> Case assigned to <strong>Jerry</strong>.
</div>

<div class="alert alert-warning">
    <button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
    <span class="icon-warning icon"></span> There are more than <strong>10</strong> cases assigned to <strong>John</strong>.
</div>

<div class="alert alert-danger">
    <span class="icon-remove icon"></span> Please fix the 3 errors.
</div>