Dashboard only
Toast component for Stripe Apps Dashboard only
Inform users of temporary status.
SDK version
To add the Toast component to your app:
React.useEffect(() => {
showToast('Changes saved', {type: 'success'});
}, []);
Render a toast at the bottom of your view to inform the user about the status of an action. For example, a toast can show a user whether an API call succeeded or failed.
The showToast() function takes two arguments, a message and options. The function is defined as follows:
type ToastType = "success" | "caution" | "pending" | undefined;
type ToastOptions = { type?: ToastType; action?: string; onAction: () => void; }
const showToast: (message: string, options?: ToastOptions) => Promise<{
update: (updateMessage: string, updateOptions?: ToastOptions) => void;
dismiss: () => void;
}>;
Toast messages can’t exceed 30 characters in length or be empty. If a message is too long or empty, the console logs an error.
Unless they’re of type pending, toasts dismiss automatically.
| Is Pending | Has Action | Timeout |
|---|---|---|
false | false | 4s |
false | true | 6s |
true | false | None |
true | true | None |
Toasts can also prompt the user to take an action. Clicking the action button automatically dismisses the toast.