Notifications

Notification provide the user with feedback about various system processes that are occurring.

Inline Notifications

Inline notifications appear near an interactive element and describe the status of the action taken usually to indicate an error has occurred. They must be dismissed or eliminated by taking action.

Description

• Inline notifications 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

<div class="alert alert-info" role="alert">
  <button type="button" class="close">
  <span aria-hidden="true">&times;</span>
  <span class="sr-only">Close</span>
  </button>
  <i class="fa fa-info-circle" aria-hidden="true"></i> Press the <strong>'A'</strong> key to automatically assign a case.
</div>
<div class="alert alert-success" role="alert">
  <button type="button" class="close">
  <span aria-hidden="true">&times;</span>
  <span class="sr-only">Close</span>
  </button>
  <button class="btn btn-sm btn-link alert-link pull-right">Undo</button>
  <i class="fa fa-check" aria-hidden="true"></i> Case assigned to <strong>Jerry</strong>
</div>
<div class="alert alert-success" role="alert">
  <button type="button" class="close">
  <span aria-hidden="true">&times;</span>
  <span class="sr-only">Close</span>
  </button>
  <i class="fa fa-check" aria-hidden="true"></i> Case assigned to
  <strong>Jerry</strong>
</div>
<div class="alert alert-warning" role="alert">
  <button type="button" class="close">
  <span aria-hidden="true">&times;</span>
  <span class="sr-only">Close</span>
  </button>
  <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> There are more than <strong>10</strong> cases assigned to <strong>John</strong>
</div>
<div class="alert alert-danger" role="alert">
  <button class="btn btn-sm btn-link alert-link pull-right">Retry</button>
  <i class="fa fa-times-circle" aria-hidden="true"></i> There was a network error assigning case
  <strong>90/934,382</strong>
</div>
<div class="alert alert-danger" role="alert">
  <i class="fa fa-times-circle" aria-hidden="true"></i> Please fix the 3 errors
</div>

System Notifications

System notifications (Toast Notifications) appear in the top-right of the screen to display short messages about a process happening in the background of a system and not necessarily tied to a preceding action. They are time based and disappear on their own.

Description

• System notifications appear in 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 5 seconds (if desired)
• Notifications with high importance (warning or danger) should not close automatically, unless the situation has been resolved in some other way

Types:

• Info notifications can be used for general messages that aren’t particularly critical.
• Success notifications can be used for positive messages that don’t have a context to associate it with.
• Warning notifications can be used for messages that likely require attention.
• Danger notifications can be used for critical messages that require immediate attention.

Example

<div class="toast-list">
    <div class="toast toast-warning">
        <div class="toast-content">
            <button type="button" class="close">
                <span>&times;</span>
            </button>
            <span>Case 90/842,381 is due tomorrow</span>
        </div>
        <div class="toast-actions">
            <button type="button" class="btn btn-link">View case</button>
            <button type="button" class="btn btn-link">Snooze <span class="caret"></span></button>
        </div>
    </div>
</div>