Skip to main content

Modal

Used to show an element that represents a custom dialog box or other interactive component, such as a dismissible alert, inspector, or subwindow.

Import​

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

Anatomy​

  1. Container
  2. Close Button (optional)
  3. Heading (optional)
  4. Body
  5. Footer (optional)

Usage​

Basic Modal​

The Modal component is just a wrapper around the native dialog element with additional accessibility features added.

Some Custom Modal

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!


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!

How to create a custom modal.
import { useRef } from 'react'
import {
  AlertDialog,
  AlertDialogBody,
  AlertDialogCloseIconButton,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogHeading,
  AlertDialogText,
  Button,
  Flex,
} from '@pluralsight/react'

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

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

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

  return (
    <div>
      <Button onClick={handleShowModal}>Show modal</Button>

      <AlertDialog bodyId="test:body" headingId="test:heading" ref={dialogRef}>
        <AlertDialogHeader>
          <AlertDialogHeading>Some Custom Modal</AlertDialogHeading>
          <AlertDialogCloseIconButton onClick={handleCloseModal} />
        </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">
            <Flex gap={16} justify="flex-end">
              <Button
                onClick={handleCancel}
                sentiment="default"
                type="button"
                usage="outline"
              >
                Cancel
              </Button>
              <Button type="submit">OK</Button>
            </Flex>
          </form>
        </AlertDialogFooter>
      </AlertDialog>
    </div>
  )
}
Use Forms for better accessibility and features

Notice we are taking advantage of the native dialog element 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.

Customizing​

The Modal can be customized in the same way as the Confirm/Prompt Dialog.

Behavior​

Modal vs. Alert Dialog

A Modal is intended for informational purposes where the Confirm/Prompt Dialog is to specifically get an action-based confirmation from the user. There are Accessibility differences between the two use cases.

Patterns​

Do use the Modal when you need the user to view addtional information within an internal view outside of the current page.

Don't use the Confirm Dialog unless you need the user to confirm a decision.

Usage​

Do use the Modal for providing more information about a context within a page.

Don't use the Modal for complex or large amounts of content, such as forms, multi-step processes, or entire page experiences.

Do use sparingly in a user experience.

Don't abuse the use of a Modal by using multiple times within a page or within a previous Modal.

API​

AlertDialog​

Parameters​

interface AlertDialogProps extends HTMLAttributes<HTMLDialogElement> {
  bodyId: string
  headingId: string
  onClose?: MouseEventHandler<HTMLButtonElement>
}
  1. bodyId - The id of the content element within the dialog.
  2. headingId - The id of the heading element within the dialog.
  3. onClose - The function that is called when the dialog is closed via .close().

AlertDialogHeading​

Parameters​

interface AlertDialogHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
  id: string
}
  1. id - The id of the heading element within the dialog.

AlertDialogBody​

Parameters​

interface AlertDialogBodyProps extends HTMLAttributes<HTMLDivElement> {
  id: string
}
  1. id - The id of the content element within the dialog.

Accessibility​

The Pando Confirm Dialog is fully accessible and screen-readable by sharing the same accessbility features as the Confirm/Prompt Dialog.