ModalDialog

The ModalDialog component provides an accessible and customizable dialog overlay for displaying important content or requesting user input. It supports different sizes, themes, and can include an icon or logo in the header.

Usage

import { ModalDialog } from "@harnessio/ui/components";

// ...

return (
  <ModalDialog.Root>
    <ModalDialog.Trigger asChild>
      <Button>Open Dialog</Button>
    </ModalDialog.Trigger>

    <ModalDialog.Content size="md">
      <ModalDialog.Header icon="circle-plus">
        <ModalDialog.Title>Dialog Title</ModalDialog.Title>
        <ModalDialog.Description>Optional description text</ModalDialog.Description>
      </ModalDialog.Header>

      <ModalDialog.Body>
        Dialog content goes here
      </ModalDialog.Body>

      <ModalDialog.Footer>
        <ModalDialog.Close>Cancel</ModalDialog.Close>
        <Button variant="primary">Confirm</Button>
      </ModalDialog.Footer>
    </ModalDialog.Content>
  </ModalDialog.Root>
)

Sizes

The ModalDialog component supports three sizes: sm, md, and lg:

Themes

Headers can have themes default, warning and danger with matching icons:

With Logo/Icon

Headers can display a logo or an icon:

Hidden Close Button

You can hide the close button in the top-right corner using the hideClose prop:

Scrollable Content

The Body component automatically handles scrolling for long content:

Anatomy

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

<ModalDialog.Root>
  <ModalDialog.Trigger />
  <ModalDialog.Content>
    <ModalDialog.Header>
      <ModalDialog.Title />
      <ModalDialog.Description />
    </ModalDialog.Header>
    <ModalDialog.Body />
    <ModalDialog.Footer>
      <ModalDialog.Close />
    </ModalDialog.Footer>
  </ModalDialog.Content>
</ModalDialog.Root>

API Reference

Root

Controls the open/close behavior of the modal.

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

Content

The main content container of the dialog.

Prop	Required	Default	Type
size	false	'sm'	'sm' | 'md' | 'lg'
hideClose	false	false	boolean
className	false		string
children	true		ReactNode

Header

The header section of the dialog, containing the title and optional description.

Prop	Required	Default	Type
icon	false		string
logo	false		string
theme	false	'default'	'default' | 'warning' | 'danger'
className	false		string
children	true		ReactNode

Title

The title text component for the dialog header.

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Description

Optional description text below the title.

Note

The Description component serves two purposes: it provides visible descriptive text and is also used for accessibility, describing the modal to screen readers. If you omit it, you should use the aria-describedby attribute instead, pointing to the ID of element(s) that describe the dialog’s purpose.

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Body

Main scrollable content area of the dialog.

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Footer

Footer section for actions (e.g., buttons).

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Prop	Required	Default	Type
className	false		string
children	true		ReactNode

Close

Can be used inside Footer or as a standalone button to close the modal.

Prop	Required	Default	Type
className	false		string
children	true		ReactNode