Dialog

Modal overlay for focused tasks. Dialog is the compound Root (Dialog.Trigger, Dialog.Backdrop, Dialog.Popup, and chrome parts). The trigger child must forward DOM props (a Button or a host element) — there is no render prop. For the previous triggerLabel / title / description API, use the SimpleDialog preset.

There is no @var-ui/astro Dialog — Astro and HTML previews show a static core-recipe approximation of the open chrome; full interaction is React-only.

You can nest Tooltip parts around Dialog.Trigger (Tooltip wraps the trigger, both stay inside Dialog) without a render prop.

State attributes, exit animation, and onOpenChange details are documented in Overlay lifecycle.

Examples

Compound parts

Compose Trigger, Backdrop, Popup, and chrome. Dialog is Root.

import { Button, Dialog } from '@var-ui/react';

<Dialog>
  <Dialog.Trigger>
    <Button intent="secondary">Open dialog</Button>
  </Dialog.Trigger>
  <Dialog.Backdrop>
    <Dialog.Popup>
      <Dialog.Header>
        <Dialog.Title>Notifications</Dialog.Title>
        <Dialog.Close aria-label="Close" />
      </Dialog.Header>
      <Dialog.Description>You are all caught up.</Dialog.Description>
      <Dialog.Actions>
        <Dialog.Close>
          <Button>Close</Button>
        </Dialog.Close>
      </Dialog.Actions>
    </Dialog.Popup>
  </Dialog.Backdrop>
</Dialog>

SimpleDialog preset

SimpleDialog keeps the assembled 80% case copy-pasteable.

import { SimpleDialog } from '@var-ui/react';

<SimpleDialog
  triggerLabel="Open dialog"
  title="Notifications"
  description="You are all caught up."
/>

Props

Accessibility

Built on React Aria Components where applicable. Focus moves into the dialog; Escape and the backdrop dismiss when isDismissable is true.