Waffles
© 2021 DataCamp, Inc.

components

Toast

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

Overview

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.

Live

Props

Toast

NameValueDefaultDescription
closeToastfunctionUsed internally. Do not explicitly set
intent'success' | 'error'RequiredDetermines the colour and icon displayed in the toast.
titlestringRequiredThe main content to display in the toast

Imports

You can import following components or utilities from this module:

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