Dialog

React dialog component with focus trapping, keyboard navigation, and animations. Perfect for forms, confirmations, and modals that need user attention.

Building forms that need focus? Confirmation dialogs for delete actions? The Dialog component handles all your modal needs with built-in accessibility, animations, and keyboard navigation.

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Perfect for login forms, settings panels, confirmation prompts, and any content that deserves your user's full attention.

npx shadcn@latest add dialog

Why developers love this Dialog

Built for modern React apps with all the features you expect:

Focus trapping - Users can't accidentally click away and lose form data
Keyboard shortcuts - Tab navigation + Escape to close works instantly
Screen reader support - WCAG compliant out of the box
Smooth animations - Professional fade/scale transitions included
Mobile responsive - Looks great on phone, tablet, desktop
No layout shift - Body scroll locks, z-index conflicts solved

Common dialog patterns developers need

Delete confirmation dialogs

The classic "Are you sure?" moment - essential for any destructive action:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Keep users focused during authentication flows:

Loading component...

"use client"import * as React from "react"import { Button } from "@/components/ui/button"import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"export default function DialogWithForm() {  const [open, setOpen] = React.useState(false)  const handleSubmit = (event: React.FormEvent) => {    event.preventDefault()    // Handle form submission    console.log("Form submitted")    setOpen(false)  }  return (    <div className="w-full p-6 flex justify-center">      <Dialog open={open} onOpenChange={setOpen}>        <DialogTrigger asChild>          <Button variant="outline">Open Form Dialog</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-[425px]">          <form onSubmit={handleSubmit}>            <DialogHeader>              <DialogTitle>Edit profile</DialogTitle>              <DialogDescription>                Make changes to your profile here. Click save when you're done.              </DialogDescription>            </DialogHeader>            <div className="grid gap-4 py-4">              <div className="grid gap-2">                <Label htmlFor="name-form">Name</Label>                <Input                   id="name-form"                   name="name"                   defaultValue="Pedro Duarte"                  required                />              </div>              <div className="grid gap-2">                <Label htmlFor="username-form">Username</Label>                <Input                   id="username-form"                   name="username"                   defaultValue="@peduarte"                  required                />              </div>            </div>            <DialogFooter>              <DialogClose asChild>                <Button type="button" variant="outline">                  Cancel                </Button>              </DialogClose>              <Button type="submit">Save changes</Button>            </DialogFooter>          </form>        </DialogContent>      </Dialog>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

One-click sharing with copy-to-clipboard functionality:

Loading component...

"use client"import * as React from "react"import { Copy, Check } from "lucide-react"import { Button } from "@/components/ui/button"import {  Dialog,  DialogClose,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"import { Input } from "@/components/ui/input"import { Label } from "@/components/ui/label"export default function DialogShare() {  const [copied, setCopied] = React.useState(false)  const shareUrl = "https://ui.shadcn.com/docs/installation"  const copyToClipboard = () => {    navigator.clipboard.writeText(shareUrl)    setCopied(true)    setTimeout(() => setCopied(false), 2000)  }  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">Share</Button>        </DialogTrigger>        <DialogContent className="sm:max-w-md">          <DialogHeader>            <DialogTitle>Share link</DialogTitle>            <DialogDescription>              Anyone who has this link will be able to view this.            </DialogDescription>          </DialogHeader>          <div className="flex items-center space-x-2">            <div className="grid flex-1 gap-2">              <Label htmlFor="link" className="sr-only">                Link              </Label>              <Input                id="link"                defaultValue={shareUrl}                readOnly              />            </div>            <Button               type="button"               size="sm"               className="px-3"              onClick={copyToClipboard}            >              <span className="sr-only">Copy</span>              {copied ? (                <Check className="h-4 w-4" />              ) : (                <Copy className="h-4 w-4" />              )}            </Button>          </div>          <DialogFooter className="sm:justify-start">            <DialogClose asChild>              <Button type="button" variant="secondary">                Close              </Button>            </DialogClose>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Terms of service and privacy policies

Long content that scrolls without breaking your layout:

Loading component...

"use client"import { Button } from "@/components/ui/button"import {  Dialog,  DialogContent,  DialogDescription,  DialogFooter,  DialogHeader,  DialogTitle,  DialogTrigger,} from "@/components/ui/dialog"import { ScrollArea } from "@/components/ui/scroll-area"export default function DialogScrollable() {  return (    <div className="w-full p-6 flex justify-center">      <Dialog>        <DialogTrigger asChild>          <Button variant="outline">View Terms</Button>        </DialogTrigger>        <DialogContent className="max-h-[80vh]">          <DialogHeader>            <DialogTitle>Terms of Service</DialogTitle>            <DialogDescription>              Please read our terms of service carefully.            </DialogDescription>          </DialogHeader>          <ScrollArea className="h-[400px] w-full rounded-md border p-4">            <div className="space-y-4">              <div>                <h4 className="font-medium">1. Acceptance of Terms</h4>                <p className="text-sm text-muted-foreground">                  By accessing and using this service, you accept and agree to be bound by the terms                  and provision of this agreement. If you do not agree to abide by the above, please                  do not use this service.                </p>              </div>              <div>                <h4 className="font-medium">2. Use License</h4>                <p className="text-sm text-muted-foreground">                  Permission is granted to temporarily download one copy of the materials (information                  or software) on our service for personal, non-commercial transitory viewing only.                  This is the grant of a license, not a transfer of title.                </p>              </div>              <div>                <h4 className="font-medium">3. Disclaimer</h4>                <p className="text-sm text-muted-foreground">                  The materials on our service are provided on an 'as is' basis. We make no warranties,                  expressed or implied, and hereby disclaim and negate all other warranties including,                  without limitation, implied warranties or conditions of merchantability, fitness for                  a particular purpose, or non-infringement of intellectual property or other violation                  of rights.                </p>              </div>              <div>                <h4 className="font-medium">4. Limitations</h4>                <p className="text-sm text-muted-foreground">                  In no event shall our company or its suppliers be liable for any damages (including,                  without limitation, damages for loss of data or profit, or due to business interruption)                  arising out of the use or inability to use the materials on our service, even if we                  or our authorized representative has been notified orally or in writing of the                  possibility of such damage.                </p>              </div>              <div>                <h4 className="font-medium">5. Privacy Policy</h4>                <p className="text-sm text-muted-foreground">                  Your privacy is important to us. Our privacy policy explains how we collect, use,                  and protect your information when you use our service. By using our service, you                  agree to the collection and use of information in accordance with our privacy policy.                </p>              </div>              <div>                <h4 className="font-medium">6. Governing Law</h4>                <p className="text-sm text-muted-foreground">                  These terms and conditions are governed by and construed in accordance with the laws                  of the country in which the company is registered and you irrevocably submit to the                  exclusive jurisdiction of the courts in that State or location.                </p>              </div>            </div>          </ScrollArea>          <DialogFooter>            <Button type="submit">Accept Terms</Button>          </DialogFooter>        </DialogContent>      </Dialog>    </div>  )}

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Custom styled modals

When you need brand-specific close buttons and styling:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

Right-click workflows that open modal actions:

Loading component...

import * as React from "react"import { Slot } from "@radix-ui/react-slot"import { cva, type VariantProps } from "class-variance-authority"import { cn } from "@/lib/utils"const buttonVariants = cva(  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",  {    variants: {      variant: {        default:          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",        destructive:          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",        outline:          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",        secondary:          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",        ghost:          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",        link: "text-primary underline-offset-4 hover:underline",      },      size: {        default: "h-9 px-4 py-2 has-[>svg]:px-3",        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",        icon: "size-9",      },    },    defaultVariants: {      variant: "default",      size: "default",    },  })function Button({  className,  variant,  size,  asChild = false,  ...props}: React.ComponentProps<"button"> &  VariantProps<typeof buttonVariants> & {    asChild?: boolean  }) {  const Comp = asChild ? Slot : "button"  return (    <Comp      data-slot="button"      className={cn(buttonVariants({ variant, size, className }))}      {...props}    />  )}export { Button, buttonVariants }

API Reference

Contains all the parts of a dialog. The root component that manages state.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	The open state of the dialog when initially rendered
`open`	`boolean`	-	The controlled open state of the dialog
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes
`modal`	`boolean`	`true`	Whether the dialog is modal (traps focus and blocks interaction with the rest of the page)

DialogTrigger

The button that opens the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child

DialogPortal

When used, portals your overlay and content parts into the body.

Prop	Type	Default	Description
`forceMount`	`boolean`	`false`	Used to force mounting when more control is needed
`container`	`HTMLElement`	`document.body`	Specify a container element to portal the content into

DialogOverlay

A layer that covers the inert portion of the view when the dialog is open.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child
`forceMount`	`boolean`	`false`	Used to force mounting when more control is needed

DialogContent

Contains content to be rendered in the open dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child
`forceMount`	`boolean`	`false`	Used to force mounting when more control is needed
`onOpenAutoFocus`	`(event: Event) => void`	-	Event handler called when the dialog is opened
`onCloseAutoFocus`	`(event: Event) => void`	-	Event handler called when the dialog is closed
`onEscapeKeyDown`	`(event: KeyboardEvent) => void`	-	Event handler called when the escape key is down
`onPointerDownOutside`	`(event: PointerDownOutsideEvent) => void`	-	Event handler called when a pointer event occurs outside the bounds
`onInteractOutside`	`(event: InteractOutsideEvent) => void`	-	Event handler called when an interaction happens outside the component

DialogClose

The button that closes the dialog.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child

DialogTitle

An accessible title to be announced when the dialog is opened.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child

DialogDescription

An optional accessible description to be announced when the dialog is opened.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the default rendered element for the one passed as a child

Key	Description
`Space`	Opens/closes the dialog
`Enter`	Opens/closes the dialog
`Tab`	Moves focus to the next focusable element
`Shift + Tab`	Moves focus to the previous focusable element
`Escape`	Closes the dialog and moves focus to trigger

Dialog best practices for better UX

What we've learned from testing with thousands of users:

Write clear button labels - "Save changes" beats "OK" every time
Give users escape routes - Escape key, X button, Cancel button - the more the better
Show what's happening - Loading spinners during saves prevent anxious re-clicks
Focus smart - Put the cursor where users expect to type first
Keep it snappy - Long dialogs lose people. Break complex flows into steps
Confirm the scary stuff - Deleting data? Make them click twice
Test with Tab and Space - Your keyboard-only users will thank you

Dialog

Why developers love this Dialog

Common dialog patterns developers need

Delete confirmation dialogs

Terms of service and privacy policies

Custom styled modals

Context menu triggered dialogs

API Reference

Dialog

DialogTrigger

DialogPortal

DialogOverlay

DialogContent

DialogClose

DialogTitle

DialogDescription

Keyboard Navigation

Dialog best practices for better UX

On this page

Dialog

Reactbutton

Reactdialog

Reactinput

Reactlabel

Reactbutton

Reactdialog

Reactbutton

Reactdialog

Reactinput

Reactlabel

Reactbutton

Reactdialog

Reactinput

Reactlabel

Reactbutton

Reactdialog

Reactscroll-area

Reactbutton

Reactdialog

Reactbutton

Reactcontext-menu

Reactdialog

On this page