Primitives

Dialog

Accessible modal on Radix, on the overlay surface. Composed of trigger, overlay, content, header and footer parts.

Preview

Installation

terminal

bash

npx @entrepta/cli@latest add dialog

Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

dialog.tsx

tsx

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

<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">$ rm -rf project</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogLabel>danger zone</DialogLabel>
      <DialogTitle>
        Delete <em>project-name</em>?
      </DialogTitle>
      <DialogDescription>This cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="ghost">Cancel</Button>
      <Button>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

Prop	Type	Default	Description
icon	Icon \| ReactElement	-	In front of the label (DialogLabel). From a server file, pass an element: icon={<RobotIcon />}
open	boolean	-	Controlled open state
onOpenChange	(open: boolean) => void	-	Callback when open state changes
modal	boolean	true	Whether to block interactions behind overlay