Dialog

Preview

Install

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/dialog

Brings in: button, locale, render-prop, utils · npm: lucide-react@^1.67.0, radix-ui@^1.8.1

Usage

"use client"

import { Button } from "@/components/ui/button"
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Roll back migration</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Roll back 0142 on Production?</DialogTitle>
          <DialogDescription>Drops the region column from customers. The 18,240 backfilled values are lost.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <DialogClose asChild>
            <Button variant="destructive">Roll back</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

<Dialog>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Root>.

<DialogClose>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Close>RenderProp.

<DialogContent>

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Content>.

<DialogDescription>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Description>.

<DialogFooter>

Also takes the props of React.ComponentProps<"div">.

<DialogHeader>

No props.

Also takes the props of React.ComponentProps<"div">.

<DialogOverlay>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Overlay>.

<DialogPortal>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Portal>.

<DialogTitle>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Title>.

<DialogTrigger>

No props.

Also takes the props of React.ComponentProps<typeof DialogPrimitive.Trigger>RenderProp.

Strings