Dialog

Modal surface for focused tasks — forms, details, and short flows. Use alert dialog when the action is destructive or irreversible.

Examples

Basic

Overview

Dialog opens a centered popup over a backdrop. Compose portal, backdrop, popup, title, description, and close. Style triggers and closes with Button via Base UI's render prop.

tsx

import {
  Button,
  Dialog,
  DialogTrigger,
  DialogPortal,
  DialogBackdrop,
  DialogPopup,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "@standard-ui/react"

<Dialog>
  <DialogTrigger render={<Button />}>Open dialog</DialogTrigger>
  <DialogPortal>
    <DialogBackdrop />
    <DialogPopup>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile.
      </DialogDescription>
      <DialogClose render={<Button variant="outline" />}>
        Close
      </DialogClose>
    </DialogPopup>
  </DialogPortal>
</Dialog>

Usage

Trigger and close

Pass Button through render so the control keeps Standard UI styles without nesting buttons.

tsx

<DialogTrigger render={<Button />}>Open dialog</DialogTrigger>
<DialogClose render={<Button variant="outline" />}>Close</DialogClose>

Structure

Always include a title. Description is optional but recommended for context. Put primary and secondary actions in a trailing row inside the popup.

tsx

<DialogPopup>
  <DialogHeader>
    <DialogTitle>Edit profile</DialogTitle>
    <DialogDescription>
      Update your name and email address.
    </DialogDescription>
  </DialogHeader>
  {/* form fields + actions */}
</DialogPopup>

API

Parts mirror Base UI Dialog. Prefer render={<Button />} on trigger and close for consistent button styles.

Part	Role
Dialog	Root state and open control.
DialogTrigger	Opens the dialog. Use Button via render.
DialogPortal	Renders overlay content outside the tree.
DialogBackdrop	Dimmed layer behind the popup.
DialogPopup	Centered surface for title, body, and actions.
DialogHeader	Groups title and description with tight spacing.
DialogTitle	Accessible dialog title.
DialogDescription	Supporting explanation.
DialogClose	Dismisses the dialog. Style with Button.