# Dialog

A window over the page for one focused task, with the page behind made inert. On Mobile it is a bottom sheet.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/dialog
```

## Usage

```tsx
import { Button } from '@/components/fetaui/button'
import { Dialog, DialogFooter } from '@/components/fetaui/dialog'

export function Example() {
  return (
    <Dialog
      trigger={<Button>Edit profile</Button>}
      title="Edit profile"
      description="Save when you're done."
      footer={<DialogFooter><Button>Save changes</Button></DialogFooter>}
    >
      {/* fields */}
    </Dialog>
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | ReactNode | required |
| description | ReactNode |  |
| media | ReactNode |  |
| close | boolean | true |
| footer | DialogFooter |  |
| layout | default, sticky, scroll | default |
| submitting | boolean | false |
| trigger | ReactElement |  |
| open | boolean |  |
| defaultOpen | boolean | false |
| onOpenChange | (open) => void |  |
| animated | boolean | true |
| DialogFooter note | ReactNode |  |

## When to use

- For a short task that needs full attention, like editing a profile or sharing a link.

## When not to use

- To confirm something destructive: use Alert Dialog.
- For longer work that should keep the page in view: use Sheet or Drawer.

## Accessibility

- A native modal dialog, labelled by the title and described by the description.
- Focus starts on the first field or the primary action.
- The close button has the label Close.

## Motion

- Opens in 200 ms from 0.96 and 8 px below, with the scrim fading in parallel.
- Closes to 0.98 in 150 ms.
- Esc while submitting gives a small pulse.
- The Mobile sheet rises on a 0.2 spring, follows the finger and closes past 30%.
- With reduced motion, it fades in. There is no pulse.