Alert Dialog
A modal that interrupts for an important decision and only closes through one of its actions.
Unlike a Dialog, clicking outside does nothing. People answer with a button, or back out with Escape.
Preview
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from '@vitnode/core/components/ui/alert-dialog'
import { Button } from '@vitnode/core/components/ui/button'<AlertDialog>
<AlertDialogTrigger
render={<Button variant="destructive">Delete thread</Button>}
/>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete this thread?</AlertDialogTitle>
<AlertDialogDescription>
All 42 replies go with it. This can't be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction variant="destructive">Delete thread</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Both AlertDialogAction and AlertDialogCancel close the dialog. Put your
logic in the action's onClick.
Icon and compact size
AlertDialogMedia adds an icon tile. With size="sm" the dialog gets narrower,
centers its text and splits the footer into two equal buttons.
<AlertDialogContent size="sm">
<AlertDialogHeader>
<AlertDialogMedia>
<LogOutIcon />
</AlertDialogMedia>
<AlertDialogTitle>Sign out of all devices?</AlertDialogTitle>
</AlertDialogHeader>
</AlertDialogContent>Waiting on an API call before closing? Confirm Action Alert Dialog handles the spinner and errors for you.
Props
Prop
Type
AlertDialogAction and AlertDialogCancel also take size. Read the open
state from children with useAlertDialog().