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).


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>


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 (
        () => toast.push({
          title: 'An important message'
Updated May 26, 2021 @ 03:24

Made withby folks at