Dialog

Dialog opens a modal over the page. Build it from Dialog, DialogTitle, DialogContent, DialogContentText and DialogActions. It sits on React Aria's modal overlay, so focus moves in, Tab stays inside, the page behind is hidden from screen readers and scrolling locks.

import Dialog from '@hone-ui/react/Dialog';
import DialogTitle from '@hone-ui/react/DialogTitle';
import DialogContent from '@hone-ui/react/DialogContent';
import DialogContentText from '@hone-ui/react/DialogContentText';
import DialogActions from '@hone-ui/react/DialogActions';

Basic dialogCopy Anchor Link

You own the open state. The dialog never closes by itself, so set it to false in onClose.

const [open, setOpen] = useState(false);

<Dialog open={open} onClose={() => setOpen(false)}>
  <DialogTitle>Delete file?</DialogTitle>
  <DialogContent>
    <DialogContentText>This cannot be undone.</DialogContentText>
  </DialogContent>
  <DialogActions>
    <Button onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={remove}>Delete</Button>
  </DialogActions>
</Dialog>;

Force a choiceCopy Anchor Link

Ignore backdrop clicks so the dialog closes only through its buttons.

<Dialog
  open={open}
  onClose={(event, reason) => {
    if (reason !== 'backdropClick') setOpen(false);
  }}
>
  ...
</Dialog>

Size and scrollingCopy Anchor Link

<Dialog open={open} onClose={close} fullWidth maxWidth="md">...</Dialog>
<Dialog open={open} onClose={close} fullScreen>...</Dialog>
<Dialog open={open} onClose={close} scroll="body">...</Dialog>

Dialog propsCopy Anchor Link

Part propsCopy Anchor Link

Form dialogCopy Anchor Link

The paper is always a section. Set component: 'form' and Dialog renders a form inside it, around the title, content and actions. onSubmit, onReset, action, method, noValidate, encType, target, autoComplete, name and acceptCharset go to the form, and nothing else does. className, sx, style, elevation, aria-* and every other prop stay on the paper section.

<Dialog
  open={open}
  onClose={close}
  slotProps={{ paper: { component: 'form', onSubmit: handleSubmit } }}
>
  <DialogTitle>Subscribe</DialogTitle>
  <DialogContent>...</DialogContent>
  <DialogActions>
    <Button type="submit">Subscribe</Button>
  </DialogActions>
</Dialog>

NotesCopy Anchor Link

• onClose receives the real DOM Event, not a React SyntheticEvent. React Aria drops the event, so Dialog reads window.event inside the synchronous dismiss callback. If no event is running, it skips onClose instead of inventing one. The event is not cancelable.
• Not supported are keepMounted, TransitionComponent, transitionDuration, TransitionProps, slots, container, disableScrollLock, disableAutoFocus, disableEnforceFocus and disableRestoreFocus. Focus trap, scroll lock and focus return always run.
• DialogContent, DialogContentText and DialogActions are Server Components and ignore theme defaultProps. Dialog and DialogTitle read them.
• Enter and exit are CSS fades. They drop to none under prefers-reduced-motion.

AccessibilityCopy Anchor Link

A Dialog needs an accessible name. A DialogTitle supplies one with no id. Without a title, set aria-label or aria-labelledby on the Dialog. To describe it with body text, give DialogContentText an id and pass that id as aria-describedby. Keep the Dialog mounted and toggle open, so the exit fade runs. Put the safe action first in DialogActions and the main action last.