Dialog

Modal surface for focused tasks, forms, and decisions.

Installation

npx shadcn@latest add @iconiq/r-dialog

File Structure

Usage

"use client";

import { useState } from "react";
import {
  Dialog,
  DialogAction,
  DialogCancel,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  dialogTriggerSmClassName,
} from "@/components/ui/r-dialog";

export function DialogPreview() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog onOpenChange={setOpen} open={open}>
      <DialogTrigger asChild>
        <button className={dialogTriggerSmClassName} type="button">
          Publish
        </button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Confirm publish</DialogTitle>
          <DialogDescription>
            This sends the draft live for everyone on the team. You can still roll back from history afterward.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogCancel>Cancel</DialogCancel>
          <DialogAction>
            Publish
          </DialogAction>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Props

Props
Description

Dialog

open

Optional controlled open state for the dialog root when the parent owns visibility.

Type boolean

defaultOpen

Uncontrolled initial state for the dialog root when you want the component to manage its own visibility.

Type boolean·Default false

onOpenChange

Called whenever the open state changes, regardless of which provider is installed underneath.

Type (open: boolean) => void

modal

Forwarded to the underlying primitive root. Set to false for non-modal dialogs that should not trap focus.

Type boolean

Exports

DialogTrigger / DialogClose

Open and close controls. DialogTrigger applies the default trigger styling automatically when asChild is false.

Type ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }

DialogAction / DialogCancel

Styled footer buttons with squircle corners. Use closeOnClick={false} for async submit flows and variant="destructive" for high-stakes actions.

Type ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean; closeOnClick?: boolean; variant?: "default" | "destructive" }

DialogContent

Visible modal card wrapper. className merges onto the animated surface. showCloseButton defaults to true. size controls card width. open is optional and reads from context when omitted.

Type Primitive popup/content props + { showCloseButton?: boolean; size?: "sm" | "default" | "lg" | "full"; open?: boolean }

DialogOverlay

Standalone overlay export for advanced portal composition. DialogContent already renders the overlay internally.

Type Overlay/backdrop primitive

DialogHeader / DialogBody / DialogFooter / DialogMedia

Layout helpers for title area, scrollable body, action row, and optional icon slot.

Type HTMLAttributes<HTMLDivElement>

DialogTitle / DialogDescription

Semantic title and description slots styled with the same modal treatment on both installs.

Type Primitive text props

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

This goes live for the team.Tapto continue.