Animate UI

Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<AlertDialog>
  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
      <AlertDialogDescription>Alert Dialog Description</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Accept</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

AlertDialog

Animate UI API Reference - Alert Dialog PrimitiveRadix UI API Reference - AlertDialog.Root

AlertDialogTrigger

Animate UI API Reference - Dialog Trigger PrimitiveRadix UI API Reference - AlertDialog.Trigger

AlertDialogContent

Animate UI API Reference - Alert Dialog Content PrimitiveRadix UI API Reference - AlertDialog.Content
PropTypeDefault
from?
'top' | 'bottom' | 'left' | 'right'
top
transition?
Transition
{ type: 'spring', stiffness: 150, damping: 25 }
...props?
HTMLMotionProps<"div">
-

The asChild and forceMount properties are not supported in the AlertDialogContent component, as it is used for animation.

AlertDialogCancel

Animate UI API Reference - Alert Dialog Cancel PrimitiveRadix UI API Reference - AlertDialog.Cancel

AlertDialogHeader

Animate UI API Reference - Alert Dialog Header Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

AlertDialogTitle

Animate UI API Reference - Alert Dialog Title PrimitiveRadix UI API Reference - AlertDialog.Title

AlertDialogDescription

Animate UI API Reference - Alert Dialog Description PrimitiveRadix UI API Reference - AlertDialog.Description

AlertDialogFooter

Animate UI API Reference - Alert Dialog Footer Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

Credits

Built by Skyleen. The source code is available on GitHub.