Dialog

Dialog(__namedParameters): ReactElement<{ ref: RefObject<OverlayRootWidget | null>; }, string | JSXElementConstructor<any>> | null

Defined in: react/components/overlay/dialog.tsx:50

A modal dialog. While open it floats above the rest of the UI on a dedicated layer that traps focus (Tab cycles only within the dialog), routes keys to the dialog’s own controls, and blocks the layer below from receiving keys or clicks. Esc and backdrop clicks request a close via DialogProps.onClose.

The dialog owns no open/close state — drive DialogProps.open yourself:

const [open, setOpen] = useState(false);
<Button onClick={() => setOpen(true)}>Settings</Button>
<Dialog open={open} onClose={() => setOpen(false)}>
  <Label>Are you sure?</Label>
  <Button onClick={() => setOpen(false)}>OK</Button>
</Dialog>

Parameters

__namedParameters

DialogProps

Returns

ReactElement<{ ref: RefObject<OverlayRootWidget | null>; }, string | JSXElementConstructor<any>> | null