AlertDialog
A modal dialog that interrupts the user with important content and expects a response.
Installation
Install the component:
npx natively-ui add alert-dialogUsage
AlertDialogDemo.jsx
1import {
2 AlertDialog,
3 AlertDialogTrigger,
4 AlertDialogContent,
5 AlertDialogHeader,
6 AlertDialogTitle,
7 AlertDialogDescription,
8 AlertDialogFooter,
9 AlertDialogCancel,
10 AlertDialogAction
11} from '@/components/ui/alert-dialog';
12
13export default function MyComponent() {
14 return (
15 <AlertDialog>
16 <AlertDialogTrigger>
17 <Button>Delete Account</Button>
18 </AlertDialogTrigger>
19 <AlertDialogContent>
20 <AlertDialogHeader>
21 <AlertDialogTitle>Are you sure?</AlertDialogTitle>
22 <AlertDialogDescription>
23 This action cannot be undone. This will permanently delete your account.
24 </AlertDialogDescription>
25 </AlertDialogHeader>
26 <AlertDialogFooter>
27 <AlertDialogCancel>Cancel</AlertDialogCancel>
28 <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
29 </AlertDialogFooter>
30 </AlertDialogContent>
31 </AlertDialog>
32 );
33}Component API
| Component | Description |
|---|---|
| AlertDialog | Root component that manages dialog state and provides context |
| AlertDialogTrigger | Button or element that opens the dialog when pressed |
| AlertDialogContent | Modal container that displays the dialog content |
| AlertDialogHeader | Container for dialog title and description with proper spacing |
| AlertDialogTitle | Title text component with appropriate typography |
| AlertDialogDescription | Description text with subdued styling |
| AlertDialogFooter | Container for action buttons with proper layout |
| AlertDialogCancel | Cancel button that closes the dialog without action |
| AlertDialogAction | Action button that performs the primary action and closes dialog |
Props
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
| AlertDialog | defaultOpen | boolean | false | Whether the dialog is open by default |
| AlertDialogTrigger | asChild | boolean | false | Render as child element instead of button |
| AlertDialogTrigger | onPress | () => void | - | Additional function called when trigger is pressed |
| AlertDialogTrigger | className | string | "" | Additional CSS classes for styling |
| AlertDialogContent | className | string | "" | Additional CSS classes for modal content |
| AlertDialogAction | variant | 'default' | 'destructive' | 'default' | Visual style variant of the action button |
| AlertDialogAction | onPress | () => void | - | Function called when action button is pressed |
| AlertDialogCancel | onPress | () => void | - | Function called when cancel button is pressed |
Features
- Modal overlay with backdrop blur and darkening
- Keyboard accessible with proper focus management
- Compound component pattern for flexible composition
- Support for destructive and default action variants
- Automatic dialog state management
- Customizable styling through className props
- Support for custom trigger elements with asChild prop
- Built with Tailwind CSS and React Native
Examples
Basic Usage
AlertDialogDemo.jsx
1<AlertDialog>
2 <AlertDialogTrigger>
3 <Button variant="destructive">Delete Item</Button>
4 </AlertDialogTrigger>
5 <AlertDialogContent>
6 <AlertDialogHeader>
7 <AlertDialogTitle>Delete Item</AlertDialogTitle>
8 <AlertDialogDescription>
9 Are you sure you want to delete this item? This action cannot be undone.
10 </AlertDialogDescription>
11 </AlertDialogHeader>
12 <AlertDialogFooter>
13 <AlertDialogCancel>Cancel</AlertDialogCancel>
14 <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
15 </AlertDialogFooter>
16 </AlertDialogContent>
17</AlertDialog>Custom Trigger
AlertDialogDemo.jsx
1<AlertDialog>
2 <AlertDialogTrigger asChild>
3 <Pressable style={{ padding: 12, backgroundColor: '#ef4444', borderRadius: 8 }}>
4 <Text style={{ color: 'white', fontWeight: 'bold' }}>
5 Custom Delete Button
6 </Text>
7 </Pressable>
8 </AlertDialogTrigger>
9 <AlertDialogContent>
10 <AlertDialogHeader>
11 <AlertDialogTitle>Confirm Deletion</AlertDialogTitle>
12 <AlertDialogDescription>
13 This will permanently remove the selected items.
14 </AlertDialogDescription>
15 </AlertDialogHeader>
16 <AlertDialogFooter>
17 <AlertDialogCancel>Keep Items</AlertDialogCancel>
18 <AlertDialogAction variant="destructive">Delete Items</AlertDialogAction>
19 </AlertDialogFooter>
20 </AlertDialogContent>
21</AlertDialog>With Action Handlers
AlertDialogDemo.jsx
1const [isLoading, setIsLoading] = useState(false);
2
3<AlertDialog>
4 <AlertDialogTrigger>
5 <Button>Save Changes</Button>
6 </AlertDialogTrigger>
7 <AlertDialogContent>
8 <AlertDialogHeader>
9 <AlertDialogTitle>Save Changes</AlertDialogTitle>
10 <AlertDialogDescription>
11 Do you want to save your changes before leaving?
12 </AlertDialogDescription>
13 </AlertDialogHeader>
14 <AlertDialogFooter>
15 <AlertDialogCancel
16 onPress={() => {
17 console.log('Changes discarded');
18 }}
19 >
20 Discard
21 </AlertDialogCancel>
22 <AlertDialogAction
23 onPress={async () => {
24 setIsLoading(true);
25 await saveChanges();
26 setIsLoading(false);
27 console.log('Changes saved');
28 }}
29 >
30 Save Changes
31 </AlertDialogAction>
32 </AlertDialogFooter>
33 </AlertDialogContent>
34</AlertDialog>Custom Styling
AlertDialogDemo.jsx
1<AlertDialog>
2 <AlertDialogTrigger className="bg-blue-500 px-4 py-2 rounded-lg">
3 <Text style={{ color: 'white' }}>Open Dialog</Text>
4 </AlertDialogTrigger>
5 <AlertDialogContent className="bg-slate-50 border-slate-200 rounded-xl max-w-sm">
6 <AlertDialogHeader>
7 <AlertDialogTitle className="text-blue-700">
8 Custom Dialog
9 </AlertDialogTitle>
10 <AlertDialogDescription className="text-slate-600">
11 This dialog has custom styling applied to all components.
12 </AlertDialogDescription>
13 </AlertDialogHeader>
14 <AlertDialogFooter className="gap-3">
15 <AlertDialogCancel className="bg-slate-200 text-slate-700">
16 Cancel
17 </AlertDialogCancel>
18 <AlertDialogAction className="bg-blue-600">
19 Confirm
20 </AlertDialogAction>
21 </AlertDialogFooter>
22 </AlertDialogContent>
23</AlertDialog>Default Open
AlertDialogDemo.jsx
1// Dialog opens automatically when component mounts
2<AlertDialog defaultOpen={true}>
3 <AlertDialogContent>
4 <AlertDialogHeader>
5 <AlertDialogTitle>Welcome!</AlertDialogTitle>
6 <AlertDialogDescription>
7 This dialog opened automatically when the page loaded.
8 </AlertDialogDescription>
9 </AlertDialogHeader>
10 <AlertDialogFooter>
11 <AlertDialogAction>Got it</AlertDialogAction>
12 </AlertDialogFooter>
13 </AlertDialogContent>
14</AlertDialog>