Skip to main content

Confirm Dialog

Used to interrupt the user with a mandatory confirmation or action.

Import

import { ConfirmProvider, useConfirm } from '@pluralsight/react'

Anatomy

  1. Dialog Container
  2. Header (optional)
  3. Heading (optional)
  4. Body
  5. Footer
  6. Cancel Button
  7. Confirm Button

Usage

Non-destructive

Use a non-destructive Confirm Dialog when you need a confirmation that does not result in a permanent destructive behavior of the database.

If you need to interrupt the user with non-critical information, use a Toast instead. Confirm Dialogs should only be used for critical information which requires a user's confirmation and should be a rare use case.

 

import { Button, ConfirmProvider, useConfirm } from '@pluralsight/react'

function PaymentFeature() {
  const { confirm } = useConfirm()

  async function handleShowAlert() {
    try {
      const consent = await confirm({
        heading: 'Confirm payment',
        text: 'Are you sure you want to make this payment?',
      })

      if (consent) {
        // fetch request to make payment
      }
    } catch (error) {
      // handle error
    }
  }

  return <Button onClick={handleShowAlert}>Confirm payment</Button>
}

export default function PaymentsPage() {
  return (
    <div>
      <ConfirmProvider>
        <PaymentFeature />
      </ConfirmProvider>

      <div>Some other content like a historical list of payments.</div>
    </div>
  )
}

Destructive

When you need a confirmation from a user that will result in a destructive action, just add the kind prop to the options with the value of destructive.

import { Button, ConfirmProvider, useConfirm } from '@pluralsight/react'

function PaymentFeature() {
  const { confirm } = useConfirm()

  async function handleShowAlert() {
    try {
      const consent = await confirm({
        heading: 'Delete payment method',
        kind: 'destructive',
        text: 'Are you sure you want to remove this payment method? This will be a permanent action.',
      })

      if (consent) {
        // fetch request to make payment
      }
    } catch (error) {
      // handle error
    }
  }

  return (
    <Button sentiment="danger" onClick={handleShowAlert}>
      Confirm payment
    </Button>
  )
}

export default function PaymentsPage() {
  return (
    <div>
      <ConfirmProvider>
        <PaymentFeature />
      </ConfirmProvider>

      <div>Some other content like a historical list of payments.</div>
    </div>
  )
}

Customizing

You can customize the Confirm Dialog in the following ways:

1. Unused Classes

Each component layer of the Confirm has a unused class name that can be utilized in your local CSS to customize the Confirm at any level.

  1. pando-alert: The element of the Confirm Alert.
  2. pando-alert-header: The header element of the Alert.
  3. pando-alert-icon: The heading icon element of the Alert.
  4. pando-alert-heading: The heading element of the Alert.
  5. pando-alert-body: The content element of the Alert.
  6. pando-alert-footer: The footer element of the Alert.
  7. pando-alert-cancel: The cancel button element of the Alert.
  8. pando-alert-confirm: The confirm button element of the Alert.

3. Ejected Confirm Dialog

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Confirm Alert however you prefer while keeping the accessibility behavior.

import {
  getAlertDialogProps,
  getAlertDialogHeaderProps,
  getAlertDialogHeadingProps,
  getAlertDialogBodyProps,
  getAlertDialogFooterProps,
} from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

Confirm dialogs are to be used to interrupt the user's task with important, critical, or warning information. This is the Pluralsight themed version of a browser's native window.confirm() function.

Patterns

Do use the Confirm Dialog when you need the user to confirm a decision.

Don't use the Modal when you need the user to confirm a decision.

Do keep Confirm Dialog layout unaltered.

Don't manipulate or add any additional elements/styles to the Confirm Dialog.

Usage

Do use sparingly in a user experience.

Don't abuse the use of this Dialog by using multiple times within a page.

API

ConfirmProvider

The ConfirmProvider should NOT be used at the top level of your application. It should be used at the top level of the feature that needs a Confirm Dialog for better performance.

Paramters

useConfirm

interface ContextProps {
  confirm: (options: ConfirmDialogProps) => Promise<boolean>
}

function useConfirm(): ContextProps

Parameters

interface ConfirmDialogProps {
  bodyId?: string
  headingId?: string
  heading?: string
  kind?: 'non-destructive' | 'destructive'
  text: string
}
  1. bodyId: The id of the body element of the Confirm Dialog. A default id will be generated if not provided.
  2. headingId: The id of the heading element of the Confirm Dialog. A default id will be generated if not provided.
  3. heading: The text of the heading element of the Confirm Dialog.
  4. kind: The kind of Confirm Dialog. The value can be either non-destructive or destructive.
  5. text: The text of the body element of the Confirm Dialog.

Accessibility

The Pando Confirm Dialog is fully accessible and screen-readable through the following features:

  1. The Confirm Dialog uses the dialog element for native browser a11y support.
  2. The dialog element uses the role of alertdialog to indicate to screen readers that the dialog contains important information.
  3. The dialog element uses the aria-modal attribute to indicate to screen readers that the dialog is modal.
  4. The dialog element uses the aria-labelledby attribute to indicate to screen readers that the dialog has a heading.
  5. The dialog element uses the aria-describedby attribute to indicate to screen readers that the dialog has a body.
  6. The Dialog API automatically focuses back on the trigger when the Dialog is closed.
  7. The Dialog traps focus within the Dialog when it is open.