Toast

A message that appears on the screen to provide feedback on an action.

Anatomy

To set up the toast correctly, you’ll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

To use the Toast component in your application, you need to set it up using the createToaster hook. This hook manages the placement and grouping of toasts, and provides a toast object needed to create toast notification.

To create a basic Toast, use the toast.create method to display a notification.

Configuring Toast

To configure the Toast component, you can pass various options to the toast.create method. These options include title, description, type, duration, and removeDelay:

Custom Rendered Toast

For cases where you need more flexibility in rendering, the Toast component offers the ability to use a custom render function. This allows you to customize the content of the toast:

API Reference

Root

PropTypeDefault
asChild
boolean

Createer

PropTypeDefault
placement
Placement
count
number
description
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal
dir
'rtl' | 'ltr'"ltr"
duration
number
gap
number
getRootNode
() => Node | ShadowRoot | Document
hotkey
string[]
id
string
max
number
offsets
string | Record<'left' | 'right' | 'top' | 'bottom', string>
overlap
boolean
pauseOnPageIdle
boolean
removeDelay
number
title
type ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal

ActionTrigger

PropTypeDefault
asChild
boolean

CloseTrigger

PropTypeDefault
asChild
boolean

Description

PropTypeDefault
asChild
boolean

Title

PropTypeDefault
asChild
boolean

er

PropTypeDefault
toaster
CreateToasterReturn
asChild
boolean