Extra test cases for Toast
Toasts will render okay, if the details are absent
@TODO: Add more guidance about this.
Email confirmed successfully!
…and they render okay without a specified “appearance” or icon
@TODO: Add more guidance about this.
Email confirmed successfully!
Toasts have a maximum width
Toast with a super duper long title that has all of the needed words
Super long details about all of things needed for this toast.
…and they shrink, to fit the available space
Payment failed
We couldn’t process your payment.
Toasts have an info state
This is an informational toast
By continuing to use Render, you’re accepting these new terms.
Example code
addToast("Our terms have changed.", {
detailsText: "By continuing to use Render, you’re accepting these new terms.",
appearance: "info",
});Toasts have a warning state
This is a warning toast.
By continuing to use Render, you’re accepting these new terms.
Example code
addToast("Our terms have changed.", {
detailsText: "By continuing to use Render, you’re accepting these new terms.",
appearance: "warning",
});Toasts sometimes have a link in the headline.
This doesn’t yet have styling applied automatically 🚧
Our terms of service have changed.
By continuing to use Render’s services, you’re indicating your acceptance of these new terms.
Example code
addToast((Our <a href="https://render.com/terms">terms of service</a> have changed.), {
detailsText: "By continuing to use Render’s services, you’re indicating your acceptance of these new terms.",
appearance: "info",
callToAction: {
label: "Accept",
onClick: () => { console.log("Terms accepted 🎉") },
},
});