AlertDialog

The AlertDialog component provides a flexible UI element for displaying alert dialogs. It is composed of several subcomponents such as AlertDialog.Header, AlertDialog.Footer, AlertDialog.Title, and AlertDialog.Description to offer a structured and customizable interface.

Usage

import { AlertDialog, Button } from '@harnessio/ui/components'

return (
  <AlertDialog.Root>
    <AlertDialog.Trigger asChild>
      <Button>Open Alert Dialog</Button>
    </AlertDialog.Trigger>
    <AlertDialog.Content>
      <AlertDialog.Header>
        <AlertDialog.Title>Alert Dialog Title</AlertDialog.Title>
      </AlertDialog.Header>
      <AlertDialog.Description variant="secondary">
        This is the alert dialog description.
        Alert dialog content goes here.
      </AlertDialog.Description>
      <AlertDialog.Footer>
        <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
        <AlertDialog.Action onClick={handleConfirm}>
          Confirm
        </AlertDialog.Action>
      </AlertDialog.Footer>
    </AlertDialog.Content>
  </AlertDialog.Root>
)

Anatomy

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

<AlertDialog.Root>
  <AlertDialog.Trigger>
    Open Alert Dialog
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Alert Dialog Title</AlertDialog.Title>
    </AlertDialog.Header>
    <AlertDialog.Description variant="secondary">
      This is the alert dialog description.
      Alert dialog content goes here.
    </AlertDialog.Description>
    <AlertDialog.Footer>
      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
      <AlertDialog.Action>Confirm</AlertDialog.Action>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog.Root>

API Reference

Root

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

Prop	Required	Default	Type
children	true		ReactNode

Trigger

The Trigger component is used to open the alert dialog.

<AlertDialog.Trigger>
  Open Alert Dialog
</AlertDialog.Trigger>

Prop	Required	Default	Type
children	true		ReactNode
asChild	false		boolean

Content

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

<AlertDialog.Content>
  <AlertDialog.Header>
    <AlertDialog.Title>Alert Dialog Title</AlertDialog.Title>
  </AlertDialog.Header>
  <AlertDialog.Description variant="secondary">
    This is the alert dialog description.
    Alert dialog content goes here.
  </AlertDialog.Description>
  <AlertDialog.Footer>
    <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
    <AlertDialog.Action>Confirm</AlertDialog.Action>
  </AlertDialog.Footer>
</AlertDialog.Content>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
onOverlayClick	false		Function

Header

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

<AlertDialog.Header>
  <AlertDialog.Title>Alert Dialog Title</AlertDialog.Title>
</AlertDialog.Header>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Footer

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

<AlertDialog.Footer>
  <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
  <AlertDialog.Action>Confirm</AlertDialog.Action>
</AlertDialog.Footer>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Title

The Title component displays the title of the alert dialog.

<AlertDialog.Title>Alert Dialog Title</AlertDialog.Title>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string

Description

The Description component displays the description of the alert dialog.

<AlertDialog.Description variant="secondary">
  This is the alert dialog description.
  Alert dialog content goes here.
</AlertDialog.Description>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
variant	false	'secondary'	'secondary' | 'quaternary'

Action

The Action component is used to define the action button of the alert dialog.

<AlertDialog.Action>Confirm</AlertDialog.Action>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
asChild	false		boolean

Cancel

The Cancel component is used to define the cancel button of the alert dialog.

<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>

Prop	Required	Default	Type
children	true		ReactNode
className	false		string
asChild	false		boolean