Dialog

View source Report an issue Edit this page

The Dialog component renders its children inside a modal and puts a dimmer over the rest of the screen

Dialog exports many components that combine to create a modal. The Dialog.Trigger renders a <button> by default, but this can be overridden with the asChild prop, which will instead add all the functional and accessibility requirements to the child component instead (see the below example).

Also, note that the component must accept a ref.

Read more about the underlying UI component on the Radix UI documentation site.


<Dialog>
  <Dialog.Trigger asChild>
    <Button>Open Dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Heading size="sm" css={{ mb: '$3' }}>
      Dialog
    </Heading>
    <Text size="sm" css={{ mb: '$3' }}>
      The `Dialog` can display any type of element as a trigger and has the
      content hidden by default
    </Text>
    <Button appearance="outline" size="sm" as={Dialog.Close}>
      Close Dialog
    </Button>
  </Dialog.Content>
</Dialog>

Dialog may be rendered without a close button. It's important to note that in case the default close button is hidden, one would need to provide an action button explicitly, to close the dialog.

<Dialog>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Content showCloseButton={false}>
    <Text>
      Dialog.Close is used below to retain the correct accessible roles and
      related logic
    </Text>
    <Button as={Dialog.Close}>Close</Button>
  </Dialog.Content>
</Dialog>

Dialog can also be rendered with a custom background. Important to note that Dialog.Background needs to be a child of Dialog.Content

<Dialog>
  <Dialog.Trigger>Open Dialog</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Background>
      <Text>
        Custom Background Content
      </Text>
    </Dialog.Background>
    <Text>
      Dialog.Background will appear above the Overlay, but below the DialogContent
    </Text>
    <Button as={Dialog.Close}>Close</Button>
  </Dialog.Content>
</Dialog>

For any modifications of the default Dialog visuals, for example bypassing the panel design entirely, we recommend utilising the Radix UI Dialog component directly. You will need to wrap each exported component within a styled() function to enable css and as, and compose together Dialog.Overlay and Dialog.Close within Dialog.Content to mimic the behaviour of this modal.

API Reference

Dialog

Prop	Type	Default	Required
`open`	`boolean`	-	-
`defaultOpen`	`boolean`	-	-
`onOpenChange`	`(open: boolean) => void`	-	-
`modal`	`boolean`	-	-
`css`	`CSSProperties`	-	-

Dialog.Content

Prop	Type	Default	Required
`asChild`	`boolean`	-	-
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	-
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	-
`onFocusOutside`	`(event: FocusOutsideEvent) => void`	-	-
`onInteractOutside`	`(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`	-	-
`onOpenAutoFocus`	`(event: Event) => void`	-	-
`onCloseAutoFocus`	`(event: Event) => void`	-	-
`forceMount`	`true`	-	-
`size`	`"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"`	`sm`	-
`css`	`CSSProperties`	-	-
`closeDialogText`	`string`	`Close dialog`	-
`showCloseButton`	`boolean`		-

Dialog.Close

Prop	Type	Default	Required
`asChild`	`boolean`	-	-
`as`	`JSX.IntrinsicElements`	-	-
`css`	`CSSProperties`	-	-