Toast

Toast

Toast serves as a feedback & confirmation mechanism after the user takes an action.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="demo-only" style="height:4rem;">
  <div class="slds-notify_container slds-is-relative">
    <div class="slds-notify slds-notify_toast slds-theme_info" role="alert">
      <span class="slds-assistive-text">info</span>
      <span class="slds-icon_container slds-icon-utility-info slds-m-right_small slds-no-flex slds-align-top" title="Description of icon when needed">
        <svg class="slds-icon slds-icon_small" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
        </svg>
      </span>
      <div class="slds-notify__content">
        <h2 class="slds-text-heading_small">26 potential duplicate leads were found.
          <a href="javascript:void(0);">Select Leads to Merge</a>
        </h2>
      </div>
      <button class="slds-button slds-button_icon slds-notify__close slds-button_icon-inverse" title="Close">
        <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
        </svg>
        <span class="slds-assistive-text">Close</span>
      </button>
    </div>
  </div>
</div>

About Toast

Accessibility

Notifications should contain role="alert" on the container to signal to assistive technology that they require the user’s immediate attention. Use a span with .slds-assistive-text to let the user know what type of notification it is.


Overview of CSS Classes

Selector.slds-notify_container
Summary
Restrictdiv
VariantTrue
Selector.slds-notify_toast
Summary

Initializes toast notification

Restrict.slds-notify_container div
Selector.slds-notify__close
Summary

Alert close button

Restrict.slds-notify_toast button