Figma
Star457

Alert Dialog

Peer 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.

yarn add @twilio-paste/alert-dialog - or - yarn add @twilio-paste/core
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>
  );
};

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

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.