Components

Toast

Toasts are messages containing confirmations, notifications, and acknowledgments that require minimal user interaction.

You can use the tool below to create your own toast and explore the various types of toasts that are available.

Notice that the Toast component itself is never actually rendered. Unlike other components, toasts are always rendered programmatically as a result of a user action. Instead of using a Toast component directly, we instead render a ToastContainer component and then fire a toast by calling the toast() function.

The ToastContainer component manages toasts globally for an application, and only needs to be rendered once in your app’s component tree.

Toast type
import { ToastContainer, toast } from '@sproutsocial/racine'

Properties

The following options can be passed into the toast() function as an object.

NameTypeDefaultDescriptionRequired?
themeinfo success warning errorinfo
contentReact.Node
persistbooleanfalseWhether or not the toast should remain on the screen or auto-dismiss
onClose() => void
useTransitionbooleantrueSet this to false to disable animations
toastIdstringtoastId allows you to prevent duplicate toasts with the same message. If your content is a string, we will use that as the toastId and you don’t need to do anything. If you have JSX and want to prevent duplicates you can pass the same custom ID with each instance of your message, and the duplicates will be prevented

Types of toasts

TypeIconDescription
InfoUsed when neutral information is being communicated.
SuccessUsed to communicate to the user when some action is successful.
WarningUsed to communicate to the user when extra care should be taken.
ErrorUsed to communicate to the user when something has gone wrong.

Recipes

Toasts can provide links for users to follow up on the notification when appropriate.

Preventing duplicate toasts

If a user is likely to repeat an identical action multiple times, you should avoid firing a separate toast for each action. You can use the toastId option to assign a unique ID to toasts. If multiple toasts share the same ID, the component will refrain from re-firing the toast.