# Dialog

> A modal or side sheet with focus trap, scroll lock and focus return.

Component · Free · https://lodeui.com/components/dialog

## When to use

- Confirming destructive actions, short forms, and focused tasks.
- Side sheets for editing a record without leaving the list.

## When not to use

- Long flows: use a page.
- Non-blocking info: use a popover or toast.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/dialog.json
```

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";

export function DeleteProject({ onDelete }: { onDelete: () => void }) {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>Delete</Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        title="Delete project?"
        description="This can't be undone."
        footer={<><Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button><Button variant="destructive" onClick={onDelete}>Delete</Button></>}
      />
    </>
  );
}
```

## API reference

### Dialog

A modal or sheet rendered in a portal, with focus trap, scroll lock and focus return.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| open / onOpenChange | `boolean / (open: boolean) => void` | – | Controlled visibility. |
| title / description | `ReactNode` | – | Linked to the dialog for screen readers. |
| children / footer | `ReactNode` | – | Body and action row. |
| side | `"center" \| "right" \| "bottom"` | `"center"` | Modal, right sheet or bottom sheet. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Esc | Close |
| Tab / Shift+Tab | Cycle focus inside the dialog |

## Accessibility

- aria-modal with aria-labelledby and aria-describedby.
- Focus moves to the first control on open and returns to the trigger on close.

## Motion

- The modal scales up from 96%; sheets slide from their edge.

## Responsive behavior

- The modal is full width minus 32px on phones; use side="bottom" for phone-friendly sheets.

## Performance

- Nothing renders while closed.

## Notes for AI

- Put the destructive button last in the footer.

## Related

- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Toast](https://lodeui.com/components/toast) — Stacked notifications that fan out on hover, swipe to dismiss, and track promises.