Toast - Lightning Design System

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

Base

Preview

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.

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

Variants

Examples

States

Form Factors

Density

Base

Preview

About Toast

Accessibility

Overview of CSS Classes

What are these categories?