Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
On-Page Alerts
draft
Place alerts on the page for longer messages that users may want to take time to review. They can be optionally dismissable.

    <div class="p-1">
      <div class="alert alert-success alert-dismissible" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">check_circle</i>
          <div class="media-body">
            This is a success alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      <div class="alert alert-danger alert-dismissible" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">error_outline</i>
          <div class="media-body">
            This is a danger alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      <div class="alert alert-warning alert-dismissible" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">warning</i>
          <div class="media-body">
            This is a warning alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      <div class="alert alert-info alert-dismissible" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">info</i>
          <div class="media-body">
            This is an info alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>

Toasts
draft
Toasts are provided quick, non-obtrusive notifications that an action has been completed. They should always be dismissable as they obscure the page beneath.

    <div class="p-1">
      <div class="alert alert-success alert-dismissible col-xs-11 col-sm-4" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">check_circle</i>
          <div class="media-body">
            This is a success alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      <div class="alert alert-danger alert-dismissible col-xs-11 col-sm-4" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">error_outline</i>
          <div class="media-body">
            This is a danger alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      <div class="alert alert-warning alert-dismissible col-xs-11 col-sm-4" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">warning</i>
          <div class="media-body">
            This is a warning alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
      <div class="alert alert-info alert-dismissible col-xs-11 col-sm-4" role="alert">
        <div class="media">
          <i class="material-icons material-icons-outlined mr-3">info</i>
          <div class="media-body">
            This is an info alert—check it out!
          </div>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
      </div>
    </div>

Toasts animate up on the bottom left side of the viewport and fade out in place. Use only short messages that a user can easily digest in Toasts. Longer, more involved messages should be displayed using an On-Page Alert.