Modal popup dialog example with onClose function in Sanity Studio
I can provide you with examples of modal popup dialogs in Sanity Studio, particularly focusing on the onClose function!
Based on the Sanity UI documentation, here's how to implement a Dialog component properly:
Basic Setup
First, you'll need to set up the state and callback handlers:
import {useCallback, useState} from 'react'
import {Dialog, Card, Button, Box, Text} from '@sanity/ui'
const [open, setOpen] = useState(false)
const onClose = useCallback(() => setOpen(false), [])
const onOpen = useCallback(() => setOpen(true), [])Complete Dialog Example
Here's a full working example with the Dialog component:
<Card padding={4} style={{textAlign: 'center'}}>
<Button onClick={onOpen} text="Open dialog" />
</Card>
{open && (
<Dialog
header="Example Dialog"
id="dialog-example"
onClose={onClose}
zOffset={1000}
>
<Box padding={4}>
<Text>Dialog content goes here</Text>
</Box>
</Dialog>
)}Key Properties You'll Want to Use
The Dialog component accepts several useful properties:
id(required): String identifier for the dialogonClose: Callback function when dialog should closeheader: React node for the dialog headerfooter: React node for the dialog footerwidth: Number or array for responsive widthszOffset: Number to control z-index stackinganimate: Boolean to enable/disable animation on mountscheme: 'dark' or 'light' color scheme
The onClose Function
The onClose function is crucial - it's called when:
- User clicks outside the dialog
- User presses the Escape key
- User clicks a close button (if you add one)
The pattern useCallback(() => setOpen(false), []) is recommended to avoid unnecessary re-renders and ensures stable function references.
Advanced Example with Footer
Here's a more complete example showing a confirmation dialog with action buttons:
{open && (
<Dialog
header="Confirm Action"
id="confirm-dialog"
onClose={onClose}
footer={
<Box padding={3}>
<Flex gap={2} justify="flex-end">
<Button text="Cancel" mode="ghost" onClick={onClose} />
<Button text="Confirm" tone="primary" onClick={handleConfirm} />
</Flex>
</Box>
}
>
<Box padding={4}>
<Text>Are you sure you want to proceed?</Text>
</Box>
</Dialog>
)}Document Action Example
If you're building custom document actions in Sanity Studio (which often use dialogs with type 'confirm'), here's an example pattern:
export const myCustomAction = (props) => {
return {
label: 'My Action',
onHandle: () => {
props.onComplete()
},
dialog: {
type: 'confirm',
message: 'Are you sure?',
onConfirm: () => {
// Do something
props.onComplete()
},
onCancel: () => {
props.onComplete()
}
}
}
}For more examples and interactive demos, check out the Dialog example in the Sanity UI Arcade where you can see it in action!
Show original thread7 replies
Was this answer helpful?
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.
