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'
})
}
/>
)
}
Updated May 26, 2021 @ 03:24
On this page