Alert Dialog Overview

---

Description

Pando’s <AlertDialog /> is the collection of components that comprise a modal.

When to use

Dialog boxes interrupt interaction with the rest of the page and should be used sparingly.

Alert Dialog anatomy

1. Backdrop
2. Dialog box
3. Close button (optional)
4. Header (optional)
5. Content area
6. Footer (optional)

Import

import {
  AlertDialog,
  AlertDialogHeader,
  AlertDialogBody,
  AlertDialogFooter,
  AlertDialogCloseIconButton,
  AlertDialogCancelButton,
  AlertDialogConfirmButton,
} from '@pluralsight/react'

Basic Usage

Native Elements

Notice in the following example that we are taking advantage of the and using a form with the method=“dialog” that contains a submit button. This allows us to use the native form functionality and accessibility features.

import { useRef } from 'react'
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogCloseIconButton,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogText,
  AlertDialogCancelButton,
  AlertDialogConfirmButton,
} from '@pluralsight/react'

export default function BasicDialog() {
  const dialogRef = useRef(null)

  function handleCancel(e) {
    e.preventDefault()
    dialogRef.current?.close()
  }

  function handleShowDialog() {
    dialogRef.current?.showModal()
  }

  return (
    <>
      // trigger
      <Button onClick={handleShowDialog}>Show dialog</Button>
      // dialog
      <AlertDialog bodyId="test:body" headingId="test:heading" ref={dialogRef}>
        <AlertDialogHeader>
          <AlertDialogHeading>Some Custom Dialog</AlertDialogHeading>
          <AlertDialogCloseIconButton onClick={handleCancel} />
        </AlertDialogHeader>

        <AlertDialogBody id="test:body">
          <AlertDialogText>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
            temporibus modi officia nulla libero voluptatibus? Deleniti, maxime.
            Optio laudantium nobis qui, eos repellat explicabo animi sit natus
            quia quam sequi!
          </AlertDialogText>
          <br />
          <AlertDialogText>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis
            temporibus modi officia nulla libero voluptatibus? Deleniti, maxime.
            Optio laudantium nobis qui, eos repellat explicabo animi sit natus
            quia quam sequi!
          </AlertDialogText>
        </AlertDialogBody>

        <AlertDialogFooter>
          <form method="dialog">
            <AlertDialogCancelButton onClick={handleCancel} type="button"/>
            <AlertDialogConfirmButton type="submit">
          </form>
        </AlertDialogFooter>
      </AlertDialog>
    </>
  )
}

Props

Note: all props denoted with a ? are optional

AlertDialog

Default

{
  bodyId: null
  headingId?: null
  kind?: 'non-destructive',
  usage?: 'dialog',
}

All Options

{
  bodyId: 'string',
  headingId?: 'string'
  kind?: 'non-destructive' | 'destructive',
  usage?: 'dialog',
  ...nativeHTMLDialogAttributes
}

AlertDialogHeader

Default

{
  kind?: 'non-destructive',
}

All Options

{
  kind?: 'non-destructive' | 'destructive',
  ...nativeHTMLDivAttributes
}

AlertDialogBody

All Options

{
  ...nativeHTMLDivAttributes
}

AlertDialogFooter

All Options

{
  ...nativeHTMLDivAttributes
}

AlertDialogCloseIconButton

All Options

{
  ...nativeHTMLButtonAttributes
}

AlertDialogCancelButton

All Options

{
  ...nativeHTMLButtonAttributes
}

AlertDialogConfirmButton

All Options

{
  ...nativeHTMLButtonAttributes
}

AlertDialogHeading

All Options

{
  ...nativeHTMLHeadingAttributes
}

AlertDialogLabel

All Options

{
  ...nativeHTMLLabelAttributes
}

AlertDialogText

All Options

{
  ...nativeHTMLParagraphAttributes
}