Dialogs

Usage and anatomy

Dialog presents focused content above the current page. Use <Dialog.Root /> for state, <Dialog.Trigger /> to open it, and place the accessible title and description inside <Dialog.Content />.

import * as Button from "@acme/ui/button"
import * as Dialog from "@acme/ui/dialog"

<Dialog.Root>
  <Dialog.Trigger asChild>
    <Button.Root>
      <Button.Label>Open dialog</Button.Label>
    </Button.Root>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Confirm changes</Dialog.Title>
      <Dialog.Description>Review the details before continuing.</Dialog.Description>
    </Dialog.Header>
    <Dialog.Footer>{/* Actions */}</Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

• Always provide Dialog.Title and use Dialog.Description when supporting context is needed.
• Use Dialog.Body for scrollable or form content and Dialog.Footer for actions.
• Wrap dismissing actions with Dialog.Close so state and focus are restored correctly.

API reference

Dialog.Root and Dialog.Content

Dialog.Root, Dialog.Trigger, Dialog.Close, and Dialog.Content accept their corresponding Radix Dialog props. Header, Body, and Footer accept native div props; Title and Description accept Radix accessibility props.