Dialog

Modal dialog built on Radix UI with overlay, title, description, and action buttons.

Live Demo

Props

Prop	Type	Default	Description
`Dialog`	`RadixDialog.RootProps`	`—`	Root component that controls open/closed state.
`DialogTrigger`	`RadixDialog.TriggerProps`	`—`	Element that opens the dialog when activated.
`DialogContent`	`{ children, className, ...RadixDialog.ContentProps }`	`—`	The modal panel with overlay and close button.
`DialogHeader`	`{ children, className, ...HTMLDivAttributes }`	`—`	Container for DialogTitle and DialogDescription.
`DialogTitle`	`{ children, className, ...RadixDialog.TitleProps }`	`—`	Accessible title of the dialog.
`DialogDescription`	`{ children, className, ...RadixDialog.DescriptionProps }`	`—`	Accessible description of the dialog.
`DialogFooter`	`{ children, className, ...HTMLDivAttributes }`	`—`	Container for action buttons.
`DialogClose`	`RadixDialog.CloseProps`	`—`	Element that closes the dialog when activated.

Usage

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Button,
} from '@ghiberti85/ui'

<Dialog>
  <DialogTrigger asChild>
    <Button variant="primary">Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm action</DialogTitle>
      <DialogDescription>
        Are you sure you want to proceed? This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <DialogClose asChild>
        <Button variant="primary">Confirm</Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

View in Storybook

Open in Storybook →

←Card Tooltip→