Model Card
A component for displaying modal cards. It provides a flexible and customizable interface for actions requiring confirmation.
Usage Examples
Basic Usage
Use the modal to confirm actions like deletions or submissions.
<AlertDialog>
<AlertDialogTrigger asChild>
<button className="btn btn-primary">Open Modal</button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Modal Title</AlertDialogTitle>
<AlertDialogDescription>
Modal description goes here.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction>Confirm</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Custom Trigger Button
You can use any custom button or element to trigger the modal.
<AlertDialog>
<AlertDialogTrigger asChild>
<button className="custom-trigger">Click Me</button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Custom Trigger</AlertDialogTitle>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Close</AlertDialogCancel>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Modal with Different Actions
Customize the footer actions for specific use cases.
<AlertDialog>
<AlertDialogTrigger asChild>
<button className="btn btn-danger">Delete</button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete Confirmation</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to delete this item? This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>No, Keep It</AlertDialogCancel>
<AlertDialogAction>Yes, Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>Props
Name
Type
Default
Description
AlertDialog
React.Component
-
The root component that provides the dialog functionality.
AlertDialogTrigger
React.Component
-
The trigger that opens the dialog. It wraps any element, typically a button.
AlertDialogContent
React.Component
-
The main container for the modal content.
AlertDialogHeader
React.HTMLAttributes<HTMLDivElement>
-
Defines the header section for the modal, including the title and description.
AlertDialogFooter
React.HTMLAttributes<HTMLDivElement>
-
Defines the footer section, which typically contains action buttons like Cancel or Confirm.
AlertDialogTitle
React.Component
-
The title of the modal, usually a brief description of the action being confirmed.
AlertDialogDescription
React.Component
-
A detailed description or message about the action being confirmed.
AlertDialogAction
React.Component
-
Represents the confirm or primary action button.
AlertDialogCancel
React.Component
-
Represents the cancel button to close the dialog.