Alert Dialog

The Alert Dialog component is a modal overlay that requires user acknowledgment before proceeding. It supports controlled and uncontrolled state, animated transitions with React Native Reanimated, and a compound component API for full flexibility.

Preview

Installation

npx novaui-cli add alert-dialog

Dependencies

The Alert Dialog requires the following peer dependencies:

• react-native-reanimated >= 3

Import

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from 'novaui-components'

Basic Usage

The Alert Dialog is a compound component with these parts:

• AlertDialog - Root container with open/close state
• AlertDialogTrigger - Button that opens the dialog
• AlertDialogContent - The modal overlay and content container
• AlertDialogHeader - Groups the title and description
• AlertDialogFooter - Groups the action buttons
• AlertDialogTitle - The dialog heading
• AlertDialogDescription - The dialog body text
• AlertDialogAction - Confirm button (closes on press)
• AlertDialogCancel - Cancel button (closes on press)

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogFooter,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogAction,
  AlertDialogCancel,
} from 'novaui-components'

export function BasicAlertDialog() {
  return (
    <AlertDialog>
      <AlertDialogTrigger variant="outline" label="Show Dialog" />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your
            account and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel label="Cancel" />
          <AlertDialogAction label="Continue" />
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Destructive Action

Use a destructive action button for dangerous operations:

<AlertDialog>
  <AlertDialogTrigger variant="destructive" label="Delete Account" />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete Account</AlertDialogTitle>
      <AlertDialogDescription>
        Are you sure you want to delete your account? All of your data will
        be permanently removed. This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel label="Cancel" />
      <AlertDialogAction variant="destructive" label="Yes, delete account" />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Controlled State

Control the dialog open/close state programmatically:

import { useState } from 'react'

export function ControlledAlertDialog() {
  const [open, setOpen] = useState(false)

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger variant="outline" label="Controlled Dialog" />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Controlled Alert</AlertDialogTitle>
          <AlertDialogDescription>
            This dialog's state is managed externally via the open and
            onOpenChange props.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel label="Dismiss" />
          <AlertDialogAction label="Got it" />
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

With Async Action

Handle async operations (e.g. API calls) in the action button:

import { useState } from 'react'

export function AsyncAlertDialog() {
  const [open, setOpen] = useState(false)

  const handleDelete = async () => {
    await fetch('/api/delete-account', { method: 'DELETE' })
    setOpen(false)
  }

  return (
    <AlertDialog open={open} onOpenChange={setOpen}>
      <AlertDialogTrigger variant="destructive" label="Delete" />
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
          <AlertDialogDescription>
            This will permanently delete the selected items.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel label="Cancel" />
          <AlertDialogAction
            variant="destructive"
            label="Delete"
            onPress={handleDelete}
          />
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

Props API

AlertDialog Props

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

AlertDialogTrigger Props

Extends ButtonProps and includes:

AlertDialogContent Props

Extends React.ComponentPropsWithoutRef<typeof View>:

AlertDialogHeader Props

AlertDialogFooter Props

AlertDialogTitle Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

AlertDialogDescription Props

Extends React.ComponentPropsWithoutRef<typeof Text>:

AlertDialogAction Props

Extends ButtonProps:

AlertDialogCancel Props

Extends ButtonProps:

Animation

The Alert Dialog uses react-native-reanimated for entrance/exit animations:

• Overlay: Fades in with FadeIn / FadeOut
• Content: Spring-based zoom with FadeIn.springify().damping(20)
• Dismissal: Fades out when closed

Accessibility

• Uses React Native Modal for proper overlay behavior
• onRequestClose handles the Android back button
• statusBarTranslucent ensures the overlay covers the full screen
• Backdrop press dismisses the dialog

Best Practices

1. Use for destructive actions: Alert dialogs are best for confirming irreversible actions (delete, discard, etc.)

2. Keep it focused: Only one action + one cancel — don't add multiple choices

3. Clear copy: The title should state the action, the description should explain the consequences

4. Appropriate button labels: Use specific labels like "Delete" instead of generic "OK"

5. Don't overuse: Reserve alert dialogs for truly important decisions — overuse causes dismissal fatigue

Related Components

• Use Alert for non-blocking informational messages
• Use Dialog for general-purpose modal content that doesn't require confirmation