Components
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Usage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@tulip-systems/core/components/client";
import { Button } from "@tulip-systems/core/components";<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Show Dialog</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete your account from our servers.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Examples
Basic
A basic alert dialog with a title, description, and cancel and continue buttons.
Small
Use the size="sm" prop to make the alert dialog smaller.
Media
Use the AlertDialogMedia component to add a media element such as an icon or image to the alert
dialog.
Small with Media
Use the size="sm" prop to make the alert dialog smaller and the AlertDialogMedia component to
add a media element such as an icon or image to the alert dialog.
Destructive
Use the AlertDialogAction component to add a destructive action button to the alert dialog.
For more information about the other components and their props, see the Radix UI documentation.