Function AlertDialogExampleScene

components/docs/examples/alert-dialog-example.tsx:19–46

(p: AlertDialogExampleProps = {})

  description?: string;
  actionLabel?: string;
  cancelLabel?: string;
}

export const AlertDialogExampleScene = (p: AlertDialogExampleProps = {}) => {
  // The trigger Button: idle → hover → press, the press lands just before the
  // dialog opens (the "click" that triggers it).
  const trigger = useButtonTransition(
    [
      { at: 14, state: "hover" },
      { at: 26, state: "press" },
    ],
    { variant: "destructive" },
  );
  // The dialog opens right after the press, then closes near the end.
  const dialog = useAlertDialogTransition([
    { at: 32, state: "opened", duration: 16 },
    { at: 92, state: "closed", duration: 12 },
  ]);
  return (
    <>
      <Button label="Delete account" variant="destructive" style={trigger} />
      <AlertDialog
        title={p.title ?? "Delete account?"}
        description={
          p.description ??
          "This action cannot be undone. This will permanently remove your data from our servers."
        }
        actionLabel={p.actionLabel ?? "Delete"}
        cancelLabel={p.cancelLabel ?? "Cancel"}
        style={dialog}
      />