Alert Dialog

A modal dialog that interrupts the user workflow to request confirmation or present critical information.

Usage

Root Layout

import {PortalHost} from "@rn-primitives/portal";
 
<PortalHost name="dialog" />;

Alert Dialog

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
 
<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogPortal name="dialog">
    <AlertDialogOverlay />
    <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>Cancel</AlertDialogCancel>
        <AlertDialogAction>Delete Account</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>;

Tip: On native platforms, this component may look out of place as users are used to seeing their platforms’ native alerts. If your use case is a simple yes/no response, consider only rendering this component on web and using Alert  on native.

Components

AlertDialog

Also extends all React Native View component props.

AlertDialogTrigger

Also extends all React Native Pressable component props.

AlertDialogContent

Also extends all React Native View component props.

AlertDialogHeader

Also extends all React Native View component props.

AlertDialogFooter

Also extends all React Native View component props.

AlertDialogTitle

Also extends all React Native Text component props.

AlertDialogDescription

Also extends all React Native Text component props.

AlertDialogAction

Also extends all React Native Pressable component props.

AlertDialogCancel

Also extends all React Native Pressable component props.

AlertDialogPortal

If you are using this component you must add a PortalHost to your root layout. See Portal  for more information.

Also extends all React Native Portal component props.

AlertDialogOverlay

If you are using this component you must add a PortalHost to your root layout. See Portal  for more information.

Also extends all React Native View component props.

Hooks

useAlertDialog

The backbone hook for the alert dialog component that manages state.

Parameters:

Returns:

{
  state: {
    isOpen: boolean;
    setIsOpen: (open: boolean) => void;
  };
}

useAlertDialogTrigger

The hook for the alert dialog trigger component that provides accessibility props.

Parameters:

Returns:

{
  componentProps: ComponentProps<typeof View> | HTMLButtonElement;
}

useAlertDialogOverlay

The hook for the alert dialog overlay component that provides overlay props.

Parameters:

Returns:

{
  overlayProps: ComponentProps<typeof TouchableWithoutFeedback>;
}

useAlertDialogContent

The hook for the alert dialog content component that provides accessibility props.

Parameters:

Returns:

{
  componentProps: ComponentProps<typeof View> | HTMLDivElement;
  titleProps: ComponentProps<typeof View> | HTMLDivElement;
}

useDialogAction

The hook for the alert dialog action and cancel components that provides accessibility props.

Parameters:

Returns:

{
  componentProps: ComponentProps<typeof Pressable> | HTMLButtonElement;
}

Accessibility

The AlertDialog component is built with accessibility in mind and includes:

Web Accessibility

• Uses useDialog hook for proper dialog semantics
• Uses useButton hook for proper button semantics on trigger and action buttons
• Uses useFocusRing for focus management
• Supports ARIA attributes: role="dialog", aria-modal="true", aria-labelledby, aria-describedby
• Keyboard navigation support (Escape to close, Tab for focus management)
• Focus trap within dialog content

React Native Accessibility

• accessibilityRole="dialog" for proper screen reader announcement
• accessibilityLiveRegion="polite" for dynamic content updates
• accessibilityViewIsModal for modal behavior
• accessibilityLabel and accessibilityHint on trigger and action buttons
• Proper focus management for screen readers

Styling

AlertDialog Classes

Slots:

• base - For the base View in the alert dialog component
• overlay - For the overlay container
• content - For the main content container

Variants:

• borderRadius:
  • none - No radius: rounded-none
  • sm - Small radius: rounded-sm
  • md - Medium radius: rounded-md
  • lg (default) - Large radius: rounded-lg
  • xl - Extra large radius: rounded-xl

Base Classes:

• overlay: fixed inset-0 z-50 bg-black opacity-80
• content: fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg rounded-lg

AlertDialogHeader Classes

Base Classes: flex justify-center sm:justify-start w-full

AlertDialogFooter Classes

Base Classes: flex flex-col-reverse gap-2 sm:flex-row sm:justify-end

AlertDialogTitle Classes

Base Classes: text-lg font-semibold leading-none tracking-tight text-foreground

AlertDialogDescription Classes

Base Classes: text-sm text-muted-foreground

AlertDialogAction & AlertDialogCancel Classes

Both components use the Button component’s styling system with the following defaults:

• AlertDialogAction: variant="destructive", size="default", borderRadius="md"
• AlertDialogCancel: variant="outline", size="default", borderRadius="md"

All button variants, sizes, and border radius options are available and can be customized through props.