Skip to main content

​
Dialog

A modal dialog component for displaying content, gathering input, and confirming actions. Supports multiple dialog types, custom content, and loading states.

​
Import

import { Dialog, DialogType } from 'nightwatch-ui';
import { ButtonGroupItem } from 'nightwatch-ui';

​
Basic Usage

<Dialog
  open={isOpen}
  onClose={() => setIsOpen(false)}
  title="Confirm Action"
  description="Are you sure you want to proceed?"
>
  <ButtonGroupItem label="Cancel" onClick={() => setIsOpen(false)} />
  <ButtonGroupItem label="Confirm" onClick={handleConfirm} />
</Dialog>

​
Dialog Types

// Confirmation dialog
<Dialog
  open={showConfirm}
  onClose={handleClose}
  type={DialogType.CONFIRM}
  title="Delete item?"
  description="This action cannot be undone."
>
  <ButtonGroupItem label="Cancel" onClick={handleClose} />
  <ButtonGroupItem label="Delete" onClick={handleDelete} destructive />
</Dialog>

// Input dialog
<Dialog
  open={showInput}
  onClose={handleClose}
  type={DialogType.INPUT}
  title="Enter name"
  inputField={<InputField value={name} onChange={(e) => setName(e.target.value)} />}
>
  <ButtonGroupItem label="Cancel" onClick={handleClose} />
  <ButtonGroupItem label="Save" onClick={handleSave} />
</Dialog>

// Settings dialog
<Dialog
  open={showSettings}
  onClose={handleClose}
  type={DialogType.SETTINGS}
  title="Settings"
  customContent
>
  <SettingsContent />
</Dialog>

​
With Progress

<Dialog
  open={showProgress}
  onClose={handleClose}
  title="Multi-step Process"
  progress={{
    totalNumSteps: 3,
    currStep: currentStep
  }}
>
  <ButtonGroupItem label="Back" onClick={handleBack} />
  <ButtonGroupItem label="Next" onClick={handleNext} />
</Dialog>

​
Loading State

<Dialog
  open={isOpen}
  onClose={handleClose}
  title="Processing"
  loading
>
  <ButtonGroupItem label="Cancel" onClick={handleClose} />
</Dialog>

​
Custom Content

<Dialog
  open={isOpen}
  onClose={handleClose}
  title="Custom Dialog"
  customContent
>
  <CustomComponent />
  <ButtonGroup>
    <ButtonGroupItem label="Close" onClick={handleClose} />
  </ButtonGroup>
</Dialog>

​
Dialog Props

​
open
boolean
required
Controls whether the dialog is visible
​
onClose
() => void | Promise<void>
required
Callback fired when the dialog should close (via close button or backdrop click)
​
children
ButtonGroupItemComponent[] | React.ReactNode
required
Dialog button content or custom content. Typically an array of ButtonGroupItem components
​
title
string
Dialog title text
​
description
string
Description text displayed below the title
​
type
DialogType
default:"DialogType.DEFAULT"
Dialog type variant. Options:
  • DialogType.DEFAULT - Standard dialog
  • DialogType.CONFIRM - Confirmation dialog with centered content
  • DialogType.INPUT - Dialog optimized for input collection
  • DialogType.PROMOTIONAL - Promotional content dialog
  • DialogType.SEARCH - Search dialog
  • DialogType.SETTINGS - Settings dialog with larger size
  • DialogType.LANDSCAPE - Wide landscape dialog
​
inputField
InputComponent | TextAreaComponent | Array<InputComponent | TextAreaComponent>
Input field(s) to display in the dialog
​
customContent
boolean
Set to true when using custom content instead of ButtonGroup children
​
loading
boolean
Shows a loading spinner in the dialog
​
progress
{ totalNumSteps: number; currStep: number }
Progress bar configuration for multi-step dialogs
​
hideCloseButton
boolean
default:false
Hides the close button in the dialog header
​
disableOffClick
boolean
Prevents closing the dialog by clicking the backdrop
​
disableTextSelect
boolean
default:false
Prevents text selection within the dialog
​
noPadding
boolean
default:false
Removes default padding from the dialog
​
size
SurfaceProps['size']
Custom dialog size override
​
width
number | string
Custom dialog width
​
height
number | string
Custom dialog height
​
zIndex
number
Custom z-index for the dialog
​
forceTheme
ThemeMode
Overrides the current theme
​
classesToIgnore
string[]
CSS class names to ignore when detecting outside clicks
​
className
string
Custom CSS class name
​
style
React.CSSProperties
Inline styles
​
dataTest
string
Test identifier for e2e tests
​
closeBtnDataTest
string
Test identifier for the close button

​
Examples

​
Delete Confirmation

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

  const handleDelete = async () => {
    await deleteItem();
    setOpen(false);
  };

  return (
    <Dialog
      open={open}
      onClose={() => setOpen(false)}
      type={DialogType.CONFIRM}
      title="Delete item?"
      description="This item will be permanently deleted."
    >
      <ButtonGroupItem 
        label="Cancel" 
        onClick={() => setOpen(false)} 
      />
      <ButtonGroupItem 
        label="Delete" 
        onClick={handleDelete}
        destructive 
      />
    </Dialog>
  );
}

​
Form Dialog

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

  const handleSave = () => {
    saveData({ name, email });
    setOpen(false);
  };

  return (
    <Dialog
      open={open}
      onClose={() => setOpen(false)}
      type={DialogType.INPUT}
      title="Add Contact"
      inputField={[
        <InputField 
          value={name} 
          onChange={(e) => setName(e.target.value)}
          placeholder="Name"
        />,
        <InputField 
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="Email"
          type={InputType.EMAIL}
        />
      ]}
    >
      <ButtonGroupItem label="Cancel" onClick={() => setOpen(false)} />
      <ButtonGroupItem label="Save" onClick={handleSave} />
    </Dialog>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us