Components
Dialog
Use for blocking confirmation, editing flows, and detail views
Dialog
Dialog is for modal interactions that temporarily block the current context.
Import
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
Button,
} from "@downcity/ui";Basic Example
import {
Button,
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
DialogFooter,
} from "@downcity/ui";
export function DeleteDialog() {
return (
<Dialog>
<DialogTrigger render={<Button variant="destructive" size="sm" />}>
Delete
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm deletion</DialogTitle>
<DialogDescription>This action cannot be undone.</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="ghost" size="sm">Cancel</Button>
<Button variant="destructive" size="sm">Delete</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}Key Exports
DialogDialogTriggerDialogPortalDialogCloseDialogOverlayDialogContentDialogHeaderDialogFooterDialogTitleDialogDescription
Usage Notes
- Do not omit
DialogTitle - Prefer
Sheetwhen the content is long or panel-like - Use
showCloseButton={false}if you need to disable the built-in close button