Nativebase logo
NativeBase
AlertDialog
AlertDialog component is used to interrupt the user with a mandatory confirmation or action. AlertDialogĀ composesĀ Ā so you can use all its props.
Import
AlertDialog: provides context and state for the dialog.
AlertDialog.Header: contains the title announced by screen readers.
AlertDialog.Body: contains the description announced by screen readers.
AlertDialog.Footer: contains the actions of the dialog.
AlertDialog.Content: The wrapper for the alert dialog's content.
AlertDialog.CloseButton: The button that closes the dialog.
Copy
import { AlertDialog } from 'native-base';
Examples
Basic
Playground
Transition
Playground
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of alertDialog.
Info: We can easily extend the alertDialog component theme using extendTheme function as described in the documentation .
Props
AlertDialog and its components compose the component, so all the can be passed to it. The only exception is that it requires leastDestructiveRef which is similar to initialFocusRef of Modal.
Name
Type
Description
Default
leastDestructiveRef
React.Ref
The least destructive action to get focus when dialog is open.
-
Accessibility
Keyboard Interactions
Name
Description
Space
Opens/closes the dialog.
Enter
Opens/closes the dialog.
Tab
Moves focus to the next focusable element.
Shift + Tab
Moves focus to the previous focusable element.
Esc
Closes the dialog and moves focus to AlertDialog.Trigger.
Nativebase logo
MadeWithNativeBase