Dialog
A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
import {Button,Dialog,DialogClose,DialogContent,DialogDescription,DialogFooter,DialogHeader,DialogTitle,DialogTrigger,} from "@murasakijs/ui";export function DialogDemo() {return ( <Dialog> <DialogTrigger asChild> <Button variant="outline">Edit Profile</Button> </DialogTrigger> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Edit profile</DialogTitle> <DialogDescription> Make changes to your profile here. Click save when you're done. </DialogDescription> </DialogHeader> <p className="text-sm text-muted-foreground"> Profile form fields would go here. </p> <DialogFooter> <DialogClose asChild> <Button type="button">Save changes</Button> </DialogClose> </DialogFooter> </DialogContent> </Dialog>);}Usage
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@murasakijs/ui";<Dialog>
<DialogTrigger>Open</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Title</DialogTitle>
<DialogDescription>Description</DialogDescription>
</DialogHeader>
</DialogContent>
</Dialog>API Reference
Subcomponents
| Component | Description |
|---|---|
Dialog | The root primitive. Accepts open, defaultOpen, onOpenChange, modal. |
DialogTrigger | The element that opens the dialog. Supports asChild to render a custom trigger (e.g. Button). |
DialogPortal | Portals its children into document.body. Used internally by DialogContent. |
DialogOverlay | The dimming backdrop. Rendered automatically by DialogContent. |
DialogContent | The dialog panel. Renders a built-in close (X) button. |
DialogHeader | Vertical stack for DialogTitle / DialogDescription. |
DialogFooter | A row for actions, right-aligned on larger screens. |
DialogTitle | The dialog's accessible name. |
DialogDescription | The dialog's accessible description. |
DialogClose | A button that closes the dialog. Supports asChild. |
All subcomponents wrap Radix UI's Dialog
primitives and forward every other prop.