© 2021 DataCamp, Inc.
⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.



A non-disruptive message to provide quick, at-a-glance feedback on the outcome of an action.


The ToastContainer component must be mounted on the page for toasts to display correctly. Calling the toast function will display the requested content for a short period of time before automatically closing.

This is powered by react-toastify. The ToastContainer component, and toast function accept all the options of the underlying library, however sensible defaults have been provided to ensure it functions as intended in the design system. There is no guarantee that all the options will correctly function as they may not interact with the Waffles defaults as intended.




closeToastfunctionUsed internally. Do not explicitly set.
dataAttributesobjectCan be used to set data- html attributes on the element.
descriptionstringOptional content to display in the toast below title.
intent'success' | 'error'RequiredDetermines the color and icon displayed in the toast.
titlestringRequiredThe main content to display in the toast.


You can import following components or utilities from this module:

import { Toast, ToastContainer, toast } from '@datacamp/waffles-toast';