Toast


Demo



Toasts have a success state

✅

Card added successfully

We’re processing your payment.

Example code
addToast("Card added successfully!", {
  detailsText: "We’re processing your payment.",
  appearance: "success",
});

…and an error state

⛔

Payment failed

We couldn’t process your payment.

Example code
addToast("Payment failed", {
  detailsText: "We couldn’t process your payment.",
  appearance: "error",
  callToAction: {
    label: "Add Card",
    onClick: () => { console.log("Adding card… ✨") },
  },
});

Toasts can be dismissed automatically

✅

Card added successfully

This message will auto dismiss.

Example code
addToast("Card added successfully!", {
  detailsText: "This message will auto dismiss.",
  appearance: "success",
  autoDismiss: true,
});

If a toast doesn’t auto-dismiss, it should have a dismiss button

ℹ️

Our terms of service and acceptable use policy have changed.

Emoji can be used for the icon

🎉

Toast with an emoji icon

We’re processing your payment.

Example code
addToast("Toast with an emoji icon", {
  detailsText: "We’re processing your payment.",
  iconText: "🎉",
});

Extra test cases for Toast