Dialog

A centered modal surface for forms, setup steps, announcements, and blocking detail panels.

Preview#

Anatomy#

Use Dialog for content surfaces that need focus trapping and a centered modal frame. Use AlertDialog for irreversible confirms and destructive confirmation flows.

import {
  Dialog,
  DialogBody,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "raft-ui";

<Dialog>
  <DialogTrigger />
  <DialogContent>
    <DialogHeader>
      <div>
        <DialogTitle />
        <DialogDescription />
      </div>
      <DialogClose />
    </DialogHeader>
    <DialogBody />
    <DialogFooter>
      <DialogClose />
    </DialogFooter>
  </DialogContent>
</Dialog>

Usage#

Edit channel#

Edit channel actions#

Invite human#

Add computer#

Attachment preview#

Announcement#

Create channel#

Create agent#

Reset agent#

Agreement#

Onboarding#

API#WIP

Dialog#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Root.Props	—	Owns open state, focus trap, Escape close, outside press, and modal behavior.

DialogTrigger#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Trigger.Props	—	Opens the dialog. Compose a Button through render when the trigger is visible.

DialogPortal#

Prop	Type	Default	Description
`container`	HTMLElement \| RefObject \| null	—	Custom portal container for framed previews or contained overlays.
`...props`	Base UI Dialog.Portal.Props	—	Portals the dialog to the body or a custom container.

DialogOverlay#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Backdrop.Props	—	Backdrop behind the dialog panel while it is open.

DialogContent#

Prop	Type	Default	Description
`overlay`	false \| DialogOverlayProps	—	Pass false for framed previews; otherwise renders the themed backdrop.
`...props`	Base UI Dialog.Popup.Props	—	Portaled centered dialog surface. Use className for width and one-off layouts.

DialogHeader#

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Header region. Defaults to title/action columns.

DialogBody#

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Main content region between header and footer.

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Footer region. Defaults to an aligned action row.

DialogTitle#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Title.Props	—	Accessible dialog title.

DialogDescription#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Description.Props	—	Accessible supporting description.

DialogClose#

Prop	Type	Default	Description
`variant`	Button variant	—	Button styling when using the default themed icon button.
`size`	Button size	—	Button size when using the default themed icon button.
`...props`	Base UI Dialog.Close.Props	—	Closes the dialog. Defaults to a themed icon button; pass render for footer actions.