Component Blueprints

Toast

information

You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20

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

26 potential duplicate leads were found. Select Leads to Merge

About Toast#

Accessibility#

Notifications should contain role="status" on the container to signal to assistive technology that they require the user’s attention. Historically the role of alert would be used, but because you can invoke multiple toasts, assertive alerts would override previous toasts in the screen reader's speech queue. Role of status is a polite live region, which does not clear the queue, reducing the risk of a toast message being missed.

Use a span with slds-assistive-text to let the user know what type of notification it is.

Base#

info

26 potential duplicate leads were found. Select Leads to Merge

<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="status">
      <span class="slds-assistive-text">info</span>

States#

Success#

success

Account ACME - 100 widgets was created.

<div class="demo-only" style="height:4rem">
  <div class="slds-notify_container slds-is-relative">
    <div class="slds-notify slds-notify_toast slds-theme_success" role="status">
      <span class="slds-assistive-text">success</span>

Warning#

warning

Can’t share file “report-q3.pdf” with the selected users.

<div class="demo-only" style="height:4rem">
  <div class="slds-notify_container slds-is-relative">
    <div class="slds-notify slds-notify_toast slds-theme_warning" role="status">
      <span class="slds-assistive-text">warning</span>

Error#

error

Can’t save lead “Sally Wong” because another lead has the same name.

<div class="demo-only" style="height:4rem">
  <div class="slds-notify_container slds-is-relative">
    <div class="slds-notify slds-notify_toast slds-theme_error" role="status">
      <span class="slds-assistive-text">error</span>

Error With Details#

error

You've encountered some errors when trying to save edits to Samuel Smith.

Here's some detail of what happened, being very descriptive and transparent.

<div class="demo-only" style="height:4rem">
  <div class="slds-notify_container slds-is-relative">
    <div class="slds-notify slds-notify_toast slds-theme_error" role="status">
      <span class="slds-assistive-text">error</span>

Examples#

Small Column#

info

26 potential duplicate leads were found.

<div class="demo-only" style="height:4rem;width:25rem">
  <div class="slds-region_narrow slds-is-relative">
    <div class="slds-notify_container slds-is-absolute">
      <div class="slds-notify slds-notify_toast slds-theme_info" role="status">

Overview of CSS Classes#

Selector.slds-notify_container
Summary

Initializes a toast container

Supportdev-ready
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 div

Toast Release Notes

2.8.0

Fixed

  • Improved the contrast for focus and hover states on links and buttons in toasts

2.7.0

Changed

  • Swapped the role value of toasts from alert to status

Fixed

  • Increased contrast between the icons and the yellow background in warning toasts.
  • Buttons with the new BEM syntax used within an inverse themed component no longer have their text color overridden