<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).
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 (
<Button
icon="rocket"
onClick={
() => toast.push({
title: 'An important message'
})
}
/>
)
}