How to show a snackbar after a document action in Sanity?
I can help you with that! To show a toast/snackbar after a document action in Sanity Studio, you need to use the useToast hook from @sanity/ui.
Here's how to implement it in a custom document action:
import {useToast} from '@sanity/ui'
export function MyCustomAction(props) {
const toast = useToast()
return {
label: 'My Action',
onHandle: () => {
// Your action logic here
// ...
// Show success toast
toast.push({
status: 'success',
title: 'Success!',
description: 'Your action completed successfully'
})
// Close the action dialog
props.onComplete()
}
}
}Important things to note:
- Import from the right package: Make sure you're importing
useToastfrom@sanity/ui, not from another package - Call it at the component level: The
useToast()hook must be called inside your action component function, not inside theonHandlecallback - Toast status options: You can use
'success','warning','error', or'info'for the status - Optional properties: You can include
title,description,duration, andclosableproperties
Here's a more complete example with error handling:
import {useToast} from '@sanity/ui'
export function MyCustomAction(props) {
const toast = useToast()
return {
label: 'My Action',
onHandle: async () => {
try {
// Your async action logic
await someAsyncOperation()
toast.push({
status: 'success',
title: 'Done!',
description: 'Document updated successfully',
duration: 3000 // milliseconds
})
} catch (error) {
toast.push({
status: 'error',
title: 'Error',
description: error.message
})
} finally {
props.onComplete()
}
}
}
}You can see a real-world example in this custom document actions guide where they use useToast to show feedback after publishing Cloudinary assets.
If you're still having trouble, make sure your Studio is using a recent version of @sanity/ui (v1.0+) and that your document action is properly registered in your sanity.config.ts file. Let me know if you need help with the configuration part!
Show original thread10 replies
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.