Toast Notifications

Toast Notifications pop onto the screen to notify the user of a system occurrence. The notifications should have a consistent location in each application. We recommend the top-right of the application. It should include a message list that enables the user to view messages later.

Toast Notifications should be transient and stay on the screen for 8 seconds, so that they do not block the information behind them for too long, but allows the user to read the message. Ideally, the user can decide what kinds of notifications appear and how long they remain on the screen. Toast Notifications should remain on the screen when the user is hovering on them.

Toast Notification

In Context

Toast Notification in context

Toast Notifications

Toast notifications with callouts

  1. Icon: Indicates the type of notification displayed (e.g. info, success, warning or error).

  2. Message: The message should explain what just happened and what the user needs to perform next. Do not include any unnecessary text. Ideally, the message is no longer than one line. Bold the important information (e.g. the names of relevant objects).

  3. Action (optional): Show actions on the right for easy access. It is recommended that only one action is shown in each notification. However, the ellipsis icon can be used when more than one actions are available. Clicking on an action should either help the user achieve the goal automatically, or open up a modal window or a different page. After the user clicks on the action, the notification will be dismissed right away.

  4. Close (optional): The user can dismiss the toast notification by clicking on the close icon.

Jump to Examples, With Max-Width or In Context

Examples

Great job! This is really working out.

The server configuration changed.

The server configuration changed.

Failed to add server_abc.

Reference Markup

<div class="toast-pf alert alert-info">
  <div class="dropdown pull-right dropdown-kebab-pf">
  <button class="btn btn-link dropdown-toggle" type="button" id="dropdownKebabRight" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="fa fa-ellipsis-v"></span>
  </button>
  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

  <div class="pull-right toast-pf-action">
    <a href="#">Reload Server</a>
  </div>
  <span class="pficon pficon-info"></span>
  <strong>Great job!</strong> This is really working out.
</div>

<div class="toast-pf alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <span class="pficon pficon-ok"></span>
  The server configuration changed.
</div>

<div class="toast-pf alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <div class="pull-right toast-pf-action">
    <a href="#">Reload Server</a>
  </div>
  <span class="pficon pficon-warning-triangle-o"></span>
  The server configuration changed.
</div>

<div class="toast-pf alert alert-danger">
  <span class="pficon pficon-error-circle-o"></span>
  Failed to add <strong>server_abc</strong>.
</div>

  

With Max-Width

Max-width is set on this example.

Reference Markup

<div class="toast-pf toast-pf-max-width alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <div class="pull-right toast-pf-action">
    <a href="#">Reload Server</a>
  </div>
  <span class="pficon pficon-warning-triangle-o"></span>
  Max-width is set on this example.
</div>

In Context

in-context-example

Reference Markup

<div class="toast-pf toast-pf-max-width toast-pf-top-right alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
    <span class="pficon pficon-close"></span>
  </button>
  <div class="pull-right toast-pf-action">
    <a href="#">Start Server</a>
  </div>
  <span class="pficon pficon-ok"></span>
  <strong>server_abc</strong> has been added to main server group.
</div>