REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Feedback & Overlay

AlertDialog

A modal dialog for important confirmations that requires explicit user action.

Example

Preview

Code

Props

AlertDialog Props

Prop

Type

Default

Description

isOpen *

boolean

—

Controls whether the alert dialog is displayed.

onClose *

() => void

—

Callback invoked when the dialog is dismissed.

size

'xs' | 'sm' | 'md' | 'lg' | 'full'

'md'

The width of the alert dialog.

AlertDialogBackdrop Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the backdrop.

AlertDialogContent Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the dialog content container.

AlertDialogHeader Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the dialog header.

AlertDialogBody Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the dialog body.

AlertDialogFooter Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the dialog footer.

AlertDialogCloseButton Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the close button.

Usage Guidelines

When to use

Use AlertDialog for destructive action confirmations, important decisions, or critical information that must be acknowledged.

Best practices

•

Reserve AlertDialog for destructive or irreversible actions — use Modal for general content.

•

Always provide a clear cancel action alongside the confirm action.

•

Use concise, action-oriented text for the dialog title and buttons.

Accessibility

AlertDialog traps focus and requires explicit dismissal. Screen readers announce the dialog title and content. Escape key dismisses the dialog.

Related Components

Modal

A compound overlay dialog component with backdrop, content, header, body, footer, and close button sub-components.

Popover

A positioned overlay that appears relative to a trigger element.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License