---
title: Dialog
description: Dialog displays modal content that requires user interaction, overlaying the main application content.
category: Overlays
related: [Button, TextField, Label, Container, FormContainer]
commonPatterns: [form-in-dialog, confirmation-dialog]
---

Source: https://clickhouse.design/click-ui/dialog

# Dialog

Dialog is a modal component that displays content in an overlay, requiring user interaction before continuing. It's useful for confirmations, forms, or important information that needs focused attention.

## Example

## Props

### Dialog root props

| Prop         | Type                      | Default value | Description                                                           |
| ------------ | ------------------------- | ------------- | --------------------------------------------------------------------- |
| open         | `boolean`                 | `undefined`   | Controlled open state. Use with onOpenChange for controlled dialogs.  |
| defaultOpen  | `boolean`                 | `false`       | Default open state for uncontrolled dialogs.                          |
| onOpenChange | `(open: boolean) => void` | `undefined`   | Callback when dialog open state changes. Receives the new open state. |
| modal        | `boolean`                 | `true`        | Whether the dialog is modal (blocks interaction with rest of page).   |

```tsx
import { Dialog } from '@clickhouse/click-ui'
import { useState } from 'react'

function DialogExample() {
const [open, setOpen] = useState(false)

return (
  <Dialog open={open} onOpenChange={setOpen}>
    <Dialog.Content title="Dialog title" showClose onClose={() => setOpen(false)}>
      <Text>Content here</Text>
    </Dialog.Content>
  </Dialog>
)
}
```

### Dialog.Content Props

| Prop          | Type         | Default value | Description                                                                |
| ------------- | ------------ | ------------- | -------------------------------------------------------------------------- |
| title         | `string`     | `undefined`   | Title text displayed in the dialog header.                                 |
| showClose     | `boolean`    | `false`       | Whether to show the close button (X) in the header.                        |
| onClose       | `() => void` | `undefined`   | Callback when close button is clicked. Typically sets open state to false. |
| showOverlay   | `boolean`    | `true`        | Whether to show the backdrop overlay behind the dialog.                    |
| reducePadding | `boolean`    | `false`       | Whether to reduce the padding inside the dialog content area.              |

```tsx
<Dialog.Content 
title="Dialog title" 
showClose 
onClose={() => setOpen(false)}
>
<Text>Content here</Text>
</Dialog.Content>
```

### Dialog.Trigger Props

| Prop    | Type      | Default value | Description                                                                             |
| ------- | --------- | ------------- | --------------------------------------------------------------------------------------- |
| asChild | `boolean` | `false`       | Whether to merge props with child element. Use with Button or other clickable elements. |

```tsx
<Dialog.Trigger asChild>
<Button label="Open Dialog" />
</Dialog.Trigger>
```

### Dialog.Close Props

| Prop  | Type                                                         | Default value | Description                             |
| ----- | ------------------------------------------------------------ | ------------- | --------------------------------------- |
| label | `string`                                                     | `"Close"`     | Text label for the close button.        |
| type  | `"primary" \| "secondary" \| "empty" \| "danger" \| "ghost"` | `"secondary"` | Button type/style for the close button. |

```tsx
<Dialog.Close label="Cancel" type="secondary" />
```

## Quick start

Use Dialog with controlled state for modal interactions:

```tsx
const [open, setOpen] = useState(false)

<Button label='Open' onClick={() => setOpen(true)} />
<Dialog open={open} onOpenChange={setOpen}>
<Dialog.Content title='Title' showClose onClose={() => setOpen(false)}>
  Content here
</Dialog.Content>
</Dialog>
```

## Related components

- **Button**: Use with Dialog.Trigger to open dialogs
- **TextField**: Use inside Dialog for form inputs
- **Label**: Use with form fields inside Dialog
- **Container**: Use to layout content inside Dialog
- **FormContainer**: Use for structured forms in Dialog

## Common use cases

### Basic dialog

```tsx
import { Dialog, Button, Text } from '@clickhouse/click-ui'
import { useState } from 'react'

function BasicDialog() {
const [open, setOpen] = useState(false)

return (
  <>
    <Button label='Open Dialog' onClick={() => setOpen(true)} />
    <Dialog open={open} onOpenChange={setOpen}>
      <Dialog.Content title='Dialog Title' showClose onClose={() => setOpen(false)}>
        <Text>Dialog content here</Text>
      </Dialog.Content>
    </Dialog>
  </>
)
}
```

### Form in Dialog

```tsx
import { Dialog, Button, TextField, Label, Container } from '@clickhouse/click-ui'
import { useState } from 'react'

function FormDialog() {
const [open, setOpen] = useState(false)
const [name, setName] = useState('')

return (
  <>
    <Button label='Add User' onClick={() => setOpen(true)} />
    <Dialog open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <span />
      </Dialog.Trigger>
      <Dialog.Content title='Add User' showClose onClose={() => setOpen(false)}>
        <Container orientation='vertical' gap='md'>
          <Label htmlFor='name'>Name</Label>
          <TextField
            id='name'
            value={name}
            onChange={(value) => setName(value)}
          />
          <Container orientation='horizontal' gap='sm' justifyContent='end'>
            <Button label='Cancel' onClick={() => setOpen(false)} />
            <Button type='primary' label='Save' onClick={() => setOpen(false)} />
          </Container>
        </Container>
      </Dialog.Content>
    </Dialog>
  </>
)
}
```

### Dialog without overlay

## See also

- Common Patterns - See Form in Dialog example
- Confirmation Dialog - For confirmation dialogs
- Flyout - Alternative overlay component