toast

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">

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">

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">

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">

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">

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">