Components
Alert Dialog

Alert Dialog Component

Installation

The Alert Dialog component provides a modal dialog that interrupts the user with important content and expects a response.

Installation Command
npx @nativecn/cli add alert-dialog

Basic Example

Basic Alert Dialog

Open Dialog

With Custom Actions

Alert Dialog with Custom Actions

Delete Account

Usage Example

Basic Alert Dialog Usage with Handlers
import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from '../components/ui/alertdialog';
import { useColorScheme } from 'react-native';

export function DeleteAccount() {
  const colorScheme = useColorScheme();
  
  const handleDelete = () => {
    // Handle account deletion
    console.log('Account deleted');
  };

  return (
    <AlertDialog mode={colorScheme}>
      <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction onPress={handleDelete}>
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Reference

Alert Dialog Component Props
// Root
interface AlertDialogProps {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  mode?: 'light' | 'dark';
  children: React.ReactNode;
}

// Trigger
interface AlertDialogTriggerProps {
  className?: string;
  children: React.ReactNode;
  asChild?: boolean;
}

// Content
interface AlertDialogContentProps {
  className?: string;
  children: React.ReactNode;
}

// Action
interface AlertDialogActionProps {
  className?: string;
  children: React.ReactNode;
  onPress?: () => void;
  onClick?: () => void;
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
}

// Cancel
interface AlertDialogCancelProps {
  className?: string;
  children: React.ReactNode;
  onPress?: () => void;
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
}
AlertAspect Ratio