Alert Dialog example

How to use this alerDialog

Props

Root

NameTypeDefaultDescription
defaultOpenboolean-The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
openboolean-The controlled open state of the dialog. Must be used in conjunction with onOpenChange.
onOpenChange(open: boolean) => void-Event handler called when the open state of the dialog changes.

Trigger

NameTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child, merging their props and behavior.

Content

NameTypeDefaultDescription
asChildbooleanfalseChange the default rendered element for the one passed as a child, merging their props and behavior.
forceMountboolean-Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from AlertDialog.Portal.
onOpenAutoFocus(event: Event) => void-Event handler called when focus moves to the destructive action after opening. It can be prevented by calling event.preventDefault.
onCloseAutoFocus(event: Event) => void-Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
onEscapeKeyDown(event: KeyboardEvent) => void-Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.

Playground

Import from @filigran/ui :

Import {AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '@filigran/ui'


<div className={tw(`flex gap-2`)}>
   <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 and remove your data from our servers.
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogCancel>Cancel</AlertDialogCancel>
        <AlertDialogAction>Continue</AlertDialogAction>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialog>
</div>