Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Features

Focus is automatically trapped.
Works in an uncontrolled way by default.
Can also be controlled.

Installation

Install the component from your command line.

npm install @radix-ui/react-dialog

npm install @radix-ui/react-dialog

Anatomy

Import the components and piece the parts together.

import * as Dialog from '@radix-ui/react-dialog';

export default () => (
  <Dialog>
    <Dialog.Trigger />
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Close />
    </Dialog.Content>
  </Dialog>
);

import * as Dialog from '@radix-ui/react-dialog';
export default () => (
  <Dialog>
    <Dialog.Trigger />
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Close />
    </Dialog.Content>
  </Dialog>
);

Basic example

Create your styled dialog component from the dialog primitives.

// import { styled } from 'path-to/stitches.config';
import * as Dialog from '@radix-ui/react-dialog';

const StyledOverlay = styled(Dialog.Overlay, {
  backgroundColor: 'rgba(0, 0, 0, .15)',
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
});

const StyledContent = styled(Dialog.Content, {
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  minWidth: 200,
  maxWidth: 'fit-content',
  maxHeight: '85vh',
  padding: 20,
  marginTop: '-5vh',
  backgroundColor: 'white',
  borderRadius: 6,

  '&:focus': {
    outline: 'none',
  },
});

export default () => (
  <Dialog.Root>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <StyledOverlay />
    <StyledContent>
      <p>Dialog content</p>
      <Dialog.Close>Close</Dialog.Close>
    </StyledContent>
  </Dialog.Root>
);

// import { styled } from 'path-to/stitches.config';
import * as Dialog from '@radix-ui/react-dialog';
const StyledOverlay = styled(Dialog.Overlay, {
  backgroundColor: 'rgba(0, 0, 0, .15)',
  position: 'fixed',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
});
const StyledContent = styled(Dialog.Content, {
  position: 'fixed',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  minWidth: 200,
  maxWidth: 'fit-content',
  maxHeight: '85vh',
  padding: 20,
  marginTop: '-5vh',
  backgroundColor: 'white',
  borderRadius: 6,
  '&:focus': {
    outline: 'none',
  },
});
export default () => (
  <Dialog.Root>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <StyledOverlay />
    <StyledContent>
      <p>Dialog content</p>
      <Dialog.Close>Close</Dialog.Close>
    </StyledContent>
  </Dialog.Root>
);

API Reference

Root

Contains all the parts of a dialog.

Prop	Type	Default	Required
`defaultOpen`	`boolean`
`open`	`boolean`
`onOpenChange`	`function`
`id`	`string`

Trigger

The button that opens the dialog.

Prop	Type	Default	Required
`as`	`enum`	`button`

Overlay

A layer that covers the inert portion of the view when the dialog is open.

Prop	Type	Default	Required
`as`	`enum`	`div`
`forceMount`	`boolean`

Content

Contains content to be rendered in the open dialog.

Prop	Type	Default
`as`	`enum`	`div`
`forceMount`	`boolean`
`onOpenAutoFocus`	`function`
`onCloseAutoFocus`	`function`
`onEscapeKeyDown`	`function`
`onPointerDownOutside`	`function`

Close

The button that closes the dialog.

Prop	Type	Default	Required
`as`	`enum`	`button`

Accessibility

Adheres to the Dialog WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
`Space`	Opens/closes the dialog.
`Enter`	Opens/closes the dialog.
`Tab`	Moves focus to the next focusable element.
`Shift + Tab`	Moves focus to the previous focusable element.
`Esc`	Closes the dialog and moves focus to `Dialog.Trigger`.