---
title: Dialog
description: A modal overlay for focused tasks or confirmations.
---
import Source from './_generated/dialog.mdx';

A modal overlay for focused tasks or confirmations, with a platform-adaptive action row.

<DemoFrame component="dialog" height={560} />

## Installation

```bash
npx touchcn add dialog
```

## Usage

<CodeGroup>

```html Angular
<tcn-dialog
  [(open)]="open"
  heading="Delete file?"
  message="This action cannot be undone."
/>
```

```tsx React
import { TcnDialog } from '@/components/ui/dialog';
import { TcnButton } from '@/components/ui/button';

<TcnDialog
  open={open}
  onOpenChange={setOpen}
  heading="Delete file?"
  message="This action cannot be undone."
  actions={<TcnButton variant="destructive">Delete</TcnButton>}
/>
```

```vue Vue
<script setup lang="ts">
import { TcnDialog } from '@/components/ui/dialog';
import { TcnButton } from '@/components/ui/button';
</script>

<template>
  <TcnDialog
    v-model:open="open"
    heading="Delete file?"
    message="This action cannot be undone."
  >
    <template #actions>
      <TcnButton variant="destructive">Delete</TcnButton>
    </template>
  </TcnDialog>
</template>
```

</CodeGroup>

## Props

| Prop           | Type                      | Default | Description                                     |
| -------------- | ------------------------- | ------- | ----------------------------------------------- |
| `open`         | `boolean`                 | `false` | Open state (two-way bound on Angular).          |
| `onOpenChange` | `(open: boolean) => void` | —       | Open-state callback (React).                    |
| `heading`      | `string`                  | `''`    | Dialog heading.                                 |
| `message`      | `string`                  | `''`    | Body text.                                      |
| `actions`      | `ReactNode`               | —       | Action row (typically `TcnButton`s) — React.    |

<Source />