⚠️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.

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.

import Button, { ButtonGroup } from '@datacamp/button';
import { toast, ToastContainer } from '@datacamp/waffles-toast';
import { Fragment } from 'react';

function Playground(): JSX.Element {
  return (
    <Fragment>
      <ToastContainer />
      <ButtonGroup>
        <Button
          onClick={() =>
            toast({ intent: 'success', title: 'Success Toast Title' })
          }
        >
          Open Success Toast
        </Button>
        <Button
          onClick={() =>
            toast({
              description: 'Ooops, something went wrong.',
              intent: 'error',
              title: 'Error Toast Title',
            })
          }
        >
          Open Error Toast
        </Button>
        <Button
          onClick={() =>
            toast({
              description:
                'Very long description text that needs to wrap since it goes over 512 pixels in total width.',
              intent: 'success',
              title:
                'Very long title text that needs to wrap since it goes over 512 pixels in total width.',
            })
          }
        >
          Open Very Long Toast
        </Button>
      </ButtonGroup>
    </Fragment>
  );
}

import Button, { ButtonGroup } from '@datacamp/button';
import { toast, ToastContainer } from '@datacamp/waffles-toast';
import { Fragment } from 'react';

function Playground(): JSX.Element {
  return (
    <Fragment>
      <ToastContainer />
      <ButtonGroup>
        <Button
          onClick={() =>
            toast({ intent: 'success', title: 'Success Toast Title' })
          }
        >
          Open Success Toast
        </Button>
        <Button
          onClick={() =>
            toast({
              description: 'Ooops, something went wrong.',
              intent: 'error',
              title: 'Error Toast Title',
            })
          }
        >
          Open Error Toast
        </Button>
        <Button
          onClick={() =>
            toast({
              description:
                'Very long description text that needs to wrap since it goes over 512 pixels in total width.',
              intent: 'success',
              title:
                'Very long title text that needs to wrap since it goes over 512 pixels in total width.',
            })
          }
        >
          Open Very Long Toast
        </Button>
      </ButtonGroup>
    </Fragment>
  );
}

Live

Props

Toast

Name	Value	Default	Description
closeToast	function		Used internally. Do not explicitly set.
dataAttributes	object		Can be used to set data- html attributes on the element.
description	string		Optional content to display in the toast below title.
intent	'success' \| 'error'	Required	Determines the color and icon displayed in the toast.
title	string	Required	The 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';