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
Props
useToast
Options of the helper toast
function exposed by the useToast
hook, that triggers a new notification.
Name | Type | Description |
---|---|---|
title Required | 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 Default: false |
size | large medium | Defines the size of the Toast. In most cases, the default size should be used. Default: medium |
variant | error info success warning | Defines the type of notification. Default: info |
ToastProvider
Name | Type | Description |
---|---|---|
children Required | React.ReactNode | Content of an app. Generally, it is enough to wrap the whole app close to its root with a single |
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';