build69
Sign inGet API key
build69  /  Components  /  Overlays  /  Dialog

Dialog

v1.0.7Updated 27 Aug 2026

Modal dialog (Radix). Blocking overlay for confirmations, forms, or focused tasks. Ships with tonal headers, a confirm pattern, multi-step stepper, and form-dialog layout for richer flows.

View source← Back to catalog

Preview

Live · 13 stories
DefaultOpen ↗
▸Why this is recommendedmodaloverlaypopupradix+4

The default, out-of-the-box Dialog.

Recommended for+14
  • ✓Confirmation prompts
  • ✓Short forms
  • ✓Important alerts
  • ✓Destructive confirms
  • ✓Multi-step wizards
  • ✓Form dialogs
Tags+6
modaloverlaypopupradixconfirmwizardstepperdefault
Features+4
  • Focus trap
  • Escape to close
  • Composable header / footer
  • Tonal header (info / success / warning / destructive)
  • Confirm pattern with primary destructive action
  • Stepper wizard variant
  • Form dialog variant
  • Loading state on primary button
  • i18n: labels prop on the Dialog root overrides the built-in Close/Cancel strings (close aria-label, sr-only close text, footer Close button, confirm-footer Cancel fallback); merged over DEFAULT_DIALOG_LABELS
Not recommended for−2
  • ✕Slide-in panels (use Sheet)
  • ✕Tooltips (use Tooltip)
  • ✕Toasts (use Sonner)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Dialog" })

Usage

import { Dialog } from '@/components/overlays/dialog';

<Dialog open={open} onOpenChange={setOpen} tone="destructive" title="Delete invoice?" confirmLabel="Delete" onConfirm={remove} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
open

Controlled open state

boolean—
onOpenChange

Open state callback

function—
tone

Header tone

'info' | 'success' | 'warning' | 'destructive'—
loading

Primary action loading state

boolean—
labels

Override the built-in Close/Cancel strings (i18n). Merged over DEFAULT_DIALOG_LABELS; works in compositional and Pro modes and does not trigger Pro mode

Partial<DialogLabels>—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files