Dialog

Default

Destructive confirmation

Server Component note

Using multiple <Dialog> instances inline in a Next.js App Router Server Component currently hits a Radix + React 19 hydration race that drops the first trigger from the DOM. The fix is to put your live demos in a 'use client' sibling file (e.g. _demos.tsx) and import the demo functions into the Server Component page — that's how these examples are written. Inside a Client Component, you can render Dialog freely without the wrapper.

Accessibility notes

• Built on Radix Dialog — focus is trapped inside the panel while it's open, Escape and overlay click dismiss it, and focus returns to the trigger on close.
• The dialog uses aria-labelledby + aria-describedby tied to DialogTitle and DialogDescription — always include both for screen readers to announce the dialog properly.
• The scale + opacity entry animation uses Motion and useReducedMotion — it becomes a simple opacity fade when the user prefers reduced motion.