Toast
- HTML/CSS:Dev Ready
- Layout:Responsive
Sections
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
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#
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#
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#
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#
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#
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#
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
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
Selector | .slds-notify_container |
---|---|
Summary | Initializes a toast container |
Support | dev-ready |
Restrict | div |
Variant | True |
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 fromalert
tostatus
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