components

Toast

A non-disruptive, short message that provides quick feedback on the outcome of an action.
GitHub
Figma

Usage guidance

A Toast is a non-disruptive way to convey messages, or give feedback that the user can take in at a glance e.g. to inform the user that their recent action was successful. It is important that the information contained in Toast is not critical as the user may miss it.

Each Toast can come in one of the four variants: info, success, warning, and error.

Toast dismisses automatically after a short time, but also can be dismissed by the user sooner. It's possible to configure a custom timeout via ToastProvider globally or for individual toast within toast function. To persist toasts by setting the disableAutoHide flag (works for both ToastProvider and toast).

Toast is available in two different sizes: medium and large. In most cases, the default value should be used.

Structure

First, wrap the whole app with ToastProvider. It's only required once. Afterward, toasts can be created easily with the helper toast function exposed by useToast hook.


Best practices


Examples

Basic usage

Variants

Sizes

Custom duration

Persistent

Individual Persistent


Playground

Live

Props

useToast

Options of the helper toast function exposed by the useToast hook, that triggers a new notification.

NameTypeDescription
titleRequired
string

The main content of the Toast.

description
React.ReactNode

Supportive content to display below the title.

disableAutoHide
boolean

Turns off auto-hide functionality for the specific Toast. Overrides the ToastProvider value.

Default:

false
size
largemedium

Defines the size of the Toast. In most cases, the default size should be used.

Default:

medium
variant
errorinfosuccesswarning

Defines the type of notification.

Default:

info

ToastProvider

NameTypeDescription
childrenRequired
React.ReactNode

Content of an app. Generally, it is enough to wrap the whole app close to its root with a single ToastProvider.

autoHideDuration
number

The number of milliseconds to wait before automatically dismissing a notification.

Default:

6000
disableAutoHide
boolean

Turns off Toasts auto-hide functionality. When the flag is passed, notifications persist and must be dismissed manually.

Default:

false
offset
string

Sets the distance from the top of the page to the Toast's container.

Default:

54px

Imports

You can import the following components, utilities or types from this module:

import { ToastProvider, useToast } from '@datacamp/waffles/toast';
import type { ToastProviderProps, ToastContextValue } from '@datacamp/waffles/toast';