Alert Dialog

Some actions require confirmation from the user.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Alert Dialog Parts

import { 
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogPopup,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogBody,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogClose,
} from 'components/selia/alert-dialog';

Structure

The expected structure and composition of the component.

Anatomy

<AlertDialog>
  <AlertDialogTrigger>
    Trigger
  </AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>
        Title
      </AlertDialogTitle>
    </AlertDialogHeader>
    <AlertDialogBody>
      <AlertDialogDescription>
        Description
      </AlertDialogDescription>
    </AlertDialogBody>
    <AlertDialogFooter>
      <AlertDialogClose>
        Close
      </AlertDialogClose>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

Examples

Trigger

You can pass a custom trigger element to the AlertDialogTrigger component by using the render prop.

Icon

An icon can be added to the AlertDialogHeader component by using the IconBox component.

Confirmation

You may want to alert the user before closing the dialog. This can be achieved by nesting the AlertDialog component inside the Dialog component.

Try to input some feedback and then click the "Cancel" button. You will be prompted with a confirmation dialog.