Alert dialog

import { AlertDialog } from "density-base-ui";

export default function AlertDialogExample() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger density-emphasis="primary">
        Delete report
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop className="alert-dialog-example-backdrop" />
        <AlertDialog.Popup className="alert-dialog-example-popup">
          <AlertDialog.Title className="alert-dialog-example-title">
            Delete quarterly report?
          </AlertDialog.Title>
          <AlertDialog.Description className="alert-dialog-example-description">
            This removes the report from everyone&apos;s dashboard. This action
            cannot be undone.
          </AlertDialog.Description>
          <div className="alert-dialog-example-actions">
            <AlertDialog.Close>Cancel</AlertDialog.Close>
            <AlertDialog.Close density-emphasis="primary">
              Delete report
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}