Modal

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

• View on Github

• View Core API

• View on Figma

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!

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>
  )
}

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

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.