Components › Touch

Notifications

Page level toasts are universally visible and are fixed to the top of the page even as the user scrolls. This ensures that the message is always delivered to the user.

PromptPrompt › DefaultPrompt › With HeaderPrompt › With Header and TaglinePrompt › With Header and Tagline + imagePromptprototype

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

A prompt for touch is a notification modal that appears in the small form factor.

Component Overview

Toasts accept two parameters: duration and dismissible. Duration controls how long the toast is visible, with a minimum time of 5 seconds. Dismissible controls whether the X is visible on the toast to let the user close the toast.

Toasts should provide a link to the relevant record in the case of creates. Or a primary action- like undo. In the case of toast for items added to a feed or related list, the link should scroll the user down the page until the item is visible.

All toasts other than success toasts should also provide an icon to distinguish the kind of message that it is. For example error toasts include the error icon.

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.