Overlays

Dialog

A modal or non-modal window for focused tasks and decisions.

DialogView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Button, Dialog } from "innate-ui";
import classes from "../docs.module.css";

export function DialogDemo() {
  return (
    <div class={classes.inlineDemo}>
      <Dialog id="dialog-demo">
        <Dialog.Trigger>
          <Button>Open</Button>
        </Dialog.Trigger>
        <Dialog.Content>
          <div class={classes.dialogBody}>
            <Dialog.Title>Dialog title</Dialog.Title>
            <Dialog.Description>General-purpose dialog content.</Dialog.Description>
            <Dialog.Actions>
              <Dialog.Close>Close</Dialog.Close>
            </Dialog.Actions>
          </div>
        </Dialog.Content>
      </Dialog>

      <Dialog id="alert-dialog-demo" role="alertdialog">
        <Dialog.Trigger>
          <Button variant="danger">Delete</Button>
        </Dialog.Trigger>
        <Dialog.Content>
          <div class={classes.dialogBody}>
            <Dialog.Title>Delete resource?</Dialog.Title>
            <Dialog.Description>This confirmation requires an explicit action.</Dialog.Description>
            <Dialog.Actions>
              <Dialog.Close autofocus>Cancel</Dialog.Close>
              <Dialog.Close variant="danger">Delete</Dialog.Close>
            </Dialog.Actions>
          </div>
        </Dialog.Content>
      </Dialog>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

DialogProps

Prop	Type	Default
`id`required Stable id used for the dialog content and accessible metadata ids.	`string`	`—`
`children`required Dialog trigger, content, and related compound parts.	`JSX.Children`	`—`
`open` Whether the dialog is open.	`JSX.ValueOrCell<boolean>`	`false`
`role` Accessible dialog role.	`JSX.ValueOrCell<DialogRole>`	`"dialog"`
`modal` Whether the dialog is modal.	`JSX.ValueOrCell<boolean>`	`true`
`closeOnInteractOutside` Whether outside interaction dismisses the dialog. Defaults to `false` for alert dialogs and `true` otherwise.	`JSX.ValueOrCell<boolean>`	`—`
`closeOnEscape` Whether pressing Escape dismisses the dialog.	`JSX.ValueOrCell<boolean>`	`true`
`onOpenChange` Called when the dialog requests an open-state change.	`(open: boolean, reason?: DialogCloseReason) => void`	`—`

Inspect the typed source →