Dialog
Use Surface.Dialog.present() for a centered modal dialog.
const result = await Surface.Dialog.present<boolean>({
body: ConfirmDialog,
});Options
interface DialogArgs<T = any> extends SurfaceArgs<T> {
size?: 'small' | 'medium' | 'large' | 'xlarge';
}size
Controls the dialog size.
| Value | Description |
|---|---|
small | Default compact dialog |
medium | Medium-width dialog |
large | Large dialog |
xlarge | Extra-large dialog |
The default is small.
barrierDismissible
Controls whether clicking the backdrop closes the dialog.
await Surface.Dialog.present({
barrierDismissible: false,
body: MyDialog,
});The default is true.
props
Pass arbitrary data to the body component:
await Surface.Dialog.present({
body: UserDialog,
props: { user },
});body
The React component rendered inside the dialog:
function UserDialog({ pop, props }: SurfaceContext) {
// ...
}Composition
Use the built-in layout components:
function Example({ pop }: SurfaceContext) {
return (
<Surface.Body>
<Surface.Header title="Profile" onPop={() => pop()} />
<Surface.Content>...</Surface.Content>
<Surface.Footer>...</Surface.Footer>
</Surface.Body>
);
}