loom muslin

Dialog

Accessible modal dialog with focus trap, Escape to close, and scroll lock.

Previewlive — edit controls below

Content

State

Basic

import { Dialog } from "@loom/muslin-react";

<Dialog title="Delete INV-2041?" description="The invoice and its PDF will be removed. This cannot be undone." trigger="Delete invoice…">
  <p>Body content</p>
</Dialog>

Confirmation flow

Element trigger with a destructive action inside.

import { Button, Dialog } from "@loom/muslin-react";

<Dialog
  title="Delete INV-2041?"
  description="The invoice and its PDF will be removed. This cannot be undone."
  trigger={<Button variant="destructive" size="sm">Delete invoice…</Button>}
>
  <div className="flex justify-end gap-2">
    <Button variant="ghost" size="sm">Keep invoice</Button>
    <Button variant="destructive" size="sm">Delete forever</Button>
  </div>
</Dialog>