Dialog

The Dialog component provides a flexible UI element for displaying overlaid content, often used for dialogs or modals. It is composed of several subcomponents such as Dialog.Header, Dialog.Footer, Dialog.Title, and Dialog.Description to offer a structured and customizable interface.

Usage

import { Dialog } from '@harnessio/ui/components'

return (
  <Dialog.Root>
    <Dialog.Trigger asChild>
      <Button>Open Dialog</Button>
    </Dialog.Trigger>
    <Dialog.Content>
      <Dialog.Header>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>This is the dialog description.</Dialog.Description>
      </Dialog.Header>
      <p>Dialog content goes here.</p>
      <Dialog.Footer>
        <Button>Footer Action</Button>
      </Dialog.Footer>
    </Dialog.Content>
  </Dialog.Root>
)

Anatomy

All parts of the Dialog component can be imported and composed as required.

<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title />
      <Dialog.Description />
    </Dialog.Header>
    <Dialog.Footer />
  </Dialog.Content>
</Dialog.Root>

API Reference

Root

The Root component serves as the main container for all dialog elements.

Prop	Required	Default	Type
children	true		ReactNode
open	false		boolean
defaultOpen	false		boolean
onOpenChange	false		(open: boolean) => void
modal	false		boolean

Trigger

The Trigger component is used to open the dialog.

<Dialog.Trigger>
  <Button>Open Dialog</Button>
</Dialog.Trigger>

Prop	Required	Default	Type
children	true		ReactNode
asChild	false		boolean

Content

The Content component defines the main content area of the dialog.

<Dialog.Content>
  <Dialog.Header>
    <Dialog.Title>Dialog Title</Dialog.Title>
    <Dialog.Description>This is the dialog description.</Dialog.Description>
  </Dialog.Header>
  <p>Dialog content goes here.</p>
  <Dialog.Footer>
    <Button>Footer Action</Button>
  </Dialog.Footer>
</Dialog.Content>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
onOverlayClick	false		() => void
forceMount	false		boolean

Header

The Header component is used to define the header section of the dialog.

<Dialog.Header>
  <Dialog.Title>Dialog Title</Dialog.Title>
  <Dialog.Description>This is the dialog description.</Dialog.Description>
</Dialog.Header>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Footer

The Footer component is used to define the footer section of the dialog.

<Dialog.Footer>
  <Button>Footer Action</Button>
</Dialog.Footer>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Title

The Title component displays the title of the dialog.

<Dialog.Title>Dialog Title</Dialog.Title>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Description

The Description component displays the description of the dialog.

<Dialog.Description>This is the dialog description.</Dialog.Description>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string