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

Dialog.Content Props

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

Dialog.Trigger Props

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

Dialog.Close Props

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

Quick Start

Use Dialog with controlled state for modal interactions:

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>

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

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

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

Example

Props

Dialog Root Props

Dialog.Content Props

Dialog.Trigger Props

Dialog.Close Props

Quick Start

Common Use Cases

Basic Dialog

Form in Dialog

Dialog Without Overlay

See Also

Dialog

Example

Props

Dialog Root Props

Dialog.Content Props

Dialog.Trigger Props

Dialog.Close Props

Quick Start

Related Components

Common Use Cases

Basic Dialog

Form in Dialog

Dialog Without Overlay

See Also