Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Alert Dialog

Version 9.2.0GithubStorybookPeer review pending

An Alert Dialog is a page overlay that displays critical information, blocks interaction with the page, and only closes after an action is performed.

Installation

Installation page anchor
yarn add @twilio-paste/alert-dialog - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {AlertDialog} from '@twilio-paste/core/alert-dialog';
import {Button} from '@twilio-paste/core/button';

const AlertDialogExample = () => {
  const [isOpen, setIsOpen] = React.useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);

  return (
    <div>
      <Button variant="primary" onClick={handleOpen}>
        Open alert dialog
      </Button>
      <AlertDialog
        heading="Submit application"
        isOpen={isOpen}
        onConfirm={() => {}}
        onConfirmLabel="Submit"
        onDismiss={handleClose}
        onDismissLabel="Cancel"
      >
        Are you sure you want to submit this application? No information can be changed after submitting.
      </AlertDialog>
    </div>
  );
};

Props

Props page anchor

AlertDialog

AlertDialog page anchor

heading RequiredRequired

Header for the Alert Dialog

Type
string

isOpen RequiredRequired

Determines whether the Alert Dialog is open

Type
boolean

onConfirm RequiredRequired

Function to run when the confirm button is used

Type
() => void

onConfirmLabel RequiredRequired

Label for the confirm button

Type
string

onDismiss RequiredRequired

Function to run when the dismiss button is used

Type
() => void

onDismissLabel RequiredRequired

Label for the dismiss button

Type
string

destructive

Display a destructive Alert Dialog

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
'ALERT_DIALOG'

onConfirmDisabled

Disable the confirm button

Type
boolean