Toast

The Toast component gives feedback to users when an action has taken place.

Toasts can be closed with a close button, or auto-dismiss after a certain timeout (defaults to 5 seconds).

`ToastProvider`

In order to use toasts, you need to wrap your application in the ToastProvider:

import {ToastProvider} from '@sanity/ui'

export function App () {
  return <ToastProvider>[...]</ToastProvider>
}

`useToast`

When a component is wrapped in the ToastProvider, the hook to push toasts to the stack of toasts is available:

import {Button, useToast} from '@sanity/ui'

function Section () {
  const toast = useToast()
  
  return (
    <Button
      icon="rocket"
      onClick={
        () => toast.push({
          title: 'An important message'
        })
      }
    />
  )
}

Updated May 26, 2021 @ 03:24

On this page

ToastProvider

useToast