Toast

    A notification component that displays temporary messages to users, typically for feedback on actions or system status.

    Basic

    Call a method from useToast to show a toast. Toasts appear in ToastRenderer, so render it once near the root of the app.

    Types

    success and warning toasts show an icon. progress and loading toasts stay open until they are dismissed; see Progress and loading.

    Duration

    duration sets how long a toast stays open, in milliseconds. The default is 3500. The timer pauses while the pointer is over the toasts.

    With actions

    actionLabel and onAction add a button to the toast. The toast closes after the action runs. With a description, the button sits under it by default; set actionPlacement: 'inline' to keep it beside the text.

    Progress and loading

    toast.progress() shows a progress bar under the description and has no close button. Update it with toast.updateProgress(id, progress) and close it with toast.dismiss(id). toast.loading() shows a spinner and stays open until it is closed.

    Dismiss

    Set duration: 0 to keep a toast open until it is closed. toast.dismiss(id) closes a toast from code, using the id the method returned. onDismiss runs only when the person closes the toast with the close button or a swipe.

    Usage

    Toast Options

    id
    string

    Custom identifier for the toast (auto-generated if omitted)

    heading
    string

    The main title of the toast. Without it, the description becomes the title, or a default title for the type is used

    description
    string

    The description text of the toast notification

    duration
    number

    Duration in milliseconds before the toast auto-dismisses (0 = persistent). Ignored for progress and loading toasts

    Default: 3500

    type
    'success''warning''default''progress''loading'

    The type of toast notification. The toast methods set it for you

    Default: default

    actionLabel
    string

    Label for the action button. Shown only together with onAction

    onAction
    () => void

    Callback fired when the action button is clicked. The toast closes after it runs

    actionPlacement
    'stacked''inline'

    Where the action button sits when there is a description: under it, or beside the text

    Default: stacked

    onDismiss
    () => void

    Callback fired when the person closes the toast with the close button or a swipe. Not called when the timer ends, the action runs, or code dismisses it

    progress
    number

    Progress value (0-100) for progress toasts. The bar shows only with a description

    Default: 0

    icon
    React.ReactNode

    Custom icon to display in the toast. Pass null to hide the icon of the type

    descriptionLineClamp
    25'none'

    How many lines of description copy to show

    Default: 2

    data-dd-privacy
    'mask'

    Masks the toast's text in session replay. Screen readers then hear only the heading, so keep names in the description

    Toast Methods

    toast()
    (options: ToastOptions) => string

    Shows a default toast and returns its id

    toast.success()
    (options: ToastOptions) => string

    Shows a success toast and returns its id

    toast.warning()
    (options: ToastOptions) => string

    Shows a warning toast and returns its id

    toast.default()
    (options: ToastOptions) => string

    Shows a default toast and returns its id

    toast.progress()
    (options: ToastOptions) => string

    Shows a progress toast that stays open until dismissed. It has no close button

    toast.loading()
    (options: ToastOptions) => string

    Shows a loading toast that stays open until it is closed

    toast.dismiss()
    (toastId: string) => void

    Dismisses a toast by id

    toast.updateProgress()
    (toastId: string, progress: number, message?: string) => void

    Updates a progress toast's value and, optionally, its description