MiHCM
overlay/@mihcm/ui·v0.21.0·stable

Dialog

Accessible modal dialog built on native <dialog>. Composable: Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose.

Confirmation dialog

Delete item?

This action cannot be undone.

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent size="sm">
    <DialogHeader>
      <DialogTitle>Delete item?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button variant="destructive" onClick={handleDelete}>Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Form dialog

Create project

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent size="lg">
    <DialogClose onClose={() => setOpen(false)} />
    <DialogHeader>
      <DialogTitle>Create project</DialogTitle>
    </DialogHeader>
    <DialogBody>
      <div className="space-y-4">
        <Input placeholder="Project name" />
        <Textarea placeholder="Description" />
      </div>
    </DialogBody>
    <DialogFooter>
      <Button onClick={() => setOpen(false)}>Create</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Full-screen dialog

<DialogContent size="full">…</DialogContent>