Alert Dialog

yarn add @twilio-paste/alert-dialog

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

const MyAlertDialog = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button variant="primary" onClick={() => setIsOpen(true)}>
        Delete Item
      </Button>
      <AlertDialog
        heading="Delete data"
        isOpen={isOpen}
        onConfirm={() => {
          // Handle delete action
          setIsOpen(false);
        }}
        onConfirmLabel="Delete"
        onDismiss={() => setIsOpen(false)}
        onDismissLabel="Cancel"
      >
        Are you sure you want to delete this data? This action cannot be undone.
      </AlertDialog>
    </>
  );
};

<AlertDialog
  heading="Submit application"
  isOpen={isOpen}
  onConfirm={handleConfirm}
  onConfirmLabel="Submit"
  onDismiss={handleDismiss}
  onDismissLabel="Cancel"
>
  Are you sure you want to submit this application? No information can be changed after submitting.
</AlertDialog>

<AlertDialog
  heading="Delete data"
  isOpen={isOpen}
  destructive
  onConfirm={handleDelete}
  onConfirmLabel="Delete"
  onDismiss={handleDismiss}
  onDismissLabel="Cancel"
>
  Are you sure you want to delete this data? This action cannot be undone.
</AlertDialog>

const [inputValue, setInputValue] = React.useState('');
const isDisabled = inputValue !== 'DELETE';

<AlertDialog
  heading="Delete regulatory bundle"
  isOpen={isOpen}
  destructive
  onConfirm={handleConfirm}
  onConfirmLabel="Delete"
  onDismiss={handleDismiss}
  onDismissLabel="Cancel"
  isConfirmDisabled={isDisabled}
>
  <p>You're about to delete "Toyota TCB Automobile" and all data associated with it.</p>
  <Label htmlFor="delete-input" required>
    Regulatory bundle name
  </Label>
  <Input
    id="delete-input"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
  />
  <HelpText>To confirm this deletion, please input DELETE.</HelpText>
</AlertDialog>