React AriaExamples

Destructive Alert Dialog

An animated confirmation Dialog for a destructive action, styled with Tailwind CSS.

Example#


import {Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay} from 'react-aria-components'; import {AlertTriangle} from 'lucide-react'; function ModalExample() { return ( <div className="bg-linear-to-r from-sky-400 to-indigo-500 p-12 rounded-lg flex justify-center"> <DialogTrigger> <Button className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"> Delete… </Button> <ModalOverlay className={({ isEntering, isExiting }) => ` absolute top-0 left-0 w-full h-(--page-height) z-10 bg-black/25 backdrop-blur isolate ${isEntering ? 'animate-in fade-in duration-300 ease-out' : ''} ${isExiting ? 'animate-out fade-out duration-200 ease-in' : ''} `} > <Modal className={({ isEntering, isExiting }) => ` sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border text-center ${isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : ''} ${isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : ''} `} > <Dialog role="alertdialog" className="max-w-md max-h-full overflow-hidden rounded-2xl bg-white p-6 box-border text-left align-middle shadow-xl outline-hidden relative" > {({ close }) => ( <> <Heading slot="title" className="text-xxl font-semibold leading-6 my-0 text-slate-700" > Delete folder </Heading> <div className="w-6 h-6 text-red-500 absolute right-6 top-6 stroke-2"> <AlertTriangle className="w-6 h-6" /> </div> <p className="mt-3 text-slate-500"> Are you sure you want to delete "Documents"? All contents will be permanently destroyed. </p> <div className="mt-6 flex justify-end gap-2"> <DialogButton className="bg-slate-200 text-slate-800 hover:border-slate-300 pressed:bg-slate-300" onPress={close} > Cancel </DialogButton> <DialogButton className="bg-red-500 text-white hover:border-red-600 pressed:bg-red-600" onPress={close} > Delete </DialogButton> </div> </> )} </Dialog> </Modal> </ModalOverlay> </DialogTrigger> </div> ); } function DialogButton({ className, ...props }) { return ( <Button {...props} className={`inline-flex justify-center rounded-md border border-solid border-transparent px-5 py-2 font-semibold font-[inherit] text-base transition-colors cursor-default outline-hidden focus-visible:ring-2 ring-blue-500 ring-offset-2 ${className}`} /> ); } 
import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components'; import {AlertTriangle} from 'lucide-react'; function ModalExample() { return ( <div className="bg-linear-to-r from-sky-400 to-indigo-500 p-12 rounded-lg flex justify-center"> <DialogTrigger> <Button className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"> Delete… </Button> <ModalOverlay className={({ isEntering, isExiting }) => ` absolute top-0 left-0 w-full h-(--page-height) z-10 bg-black/25 backdrop-blur isolate ${ isEntering ? 'animate-in fade-in duration-300 ease-out' : '' } ${ isExiting ? 'animate-out fade-out duration-200 ease-in' : '' } `} > <Modal className={({ isEntering, isExiting }) => ` sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border text-center ${ isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : '' } ${ isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : '' } `} > <Dialog role="alertdialog" className="max-w-md max-h-full overflow-hidden rounded-2xl bg-white p-6 box-border text-left align-middle shadow-xl outline-hidden relative" > {({ close }) => ( <> <Heading slot="title" className="text-xxl font-semibold leading-6 my-0 text-slate-700" > Delete folder </Heading> <div className="w-6 h-6 text-red-500 absolute right-6 top-6 stroke-2"> <AlertTriangle className="w-6 h-6" /> </div> <p className="mt-3 text-slate-500"> Are you sure you want to delete "Documents"? All contents will be permanently destroyed. </p> <div className="mt-6 flex justify-end gap-2"> <DialogButton className="bg-slate-200 text-slate-800 hover:border-slate-300 pressed:bg-slate-300" onPress={close} > Cancel </DialogButton> <DialogButton className="bg-red-500 text-white hover:border-red-600 pressed:bg-red-600" onPress={close} > Delete </DialogButton> </div> </> )} </Dialog> </Modal> </ModalOverlay> </DialogTrigger> </div> ); } function DialogButton({ className, ...props }) { return ( <Button {...props} className={`inline-flex justify-center rounded-md border border-solid border-transparent px-5 py-2 font-semibold font-[inherit] text-base transition-colors cursor-default outline-hidden focus-visible:ring-2 ring-blue-500 ring-offset-2 ${className}`} /> ); } 
import { Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components'; import {AlertTriangle} from 'lucide-react'; function ModalExample() { return ( <div className="bg-linear-to-r from-sky-400 to-indigo-500 p-12 rounded-lg flex justify-center"> <DialogTrigger> <Button className="inline-flex items-center justify-center rounded-md bg-black/20 bg-clip-padding border border-white/20 px-3.5 py-2 font-medium font-[inherit] text-base text-white hover:bg-black/30 pressed:bg-black/40 transition-colors cursor-default outline-hidden focus-visible:ring-2 focus-visible:ring-white/75"> Delete… </Button> <ModalOverlay className={( { isEntering, isExiting } ) => ` absolute top-0 left-0 w-full h-(--page-height) z-10 bg-black/25 backdrop-blur isolate ${ isEntering ? 'animate-in fade-in duration-300 ease-out' : '' } ${ isExiting ? 'animate-out fade-out duration-200 ease-in' : '' } `} > <Modal className={( { isEntering, isExiting } ) => ` sticky top-0 left-0 w-full h-(--visual-viewport-height) flex items-center justify-center p-4 box-border text-center ${ isEntering ? 'animate-in zoom-in-95 ease-out duration-300' : '' } ${ isExiting ? 'animate-out zoom-out-95 ease-in duration-200' : '' } `} > <Dialog role="alertdialog" className="max-w-md max-h-full overflow-hidden rounded-2xl bg-white p-6 box-border text-left align-middle shadow-xl outline-hidden relative" > {( { close } ) => ( <> <Heading slot="title" className="text-xxl font-semibold leading-6 my-0 text-slate-700" > Delete folder </Heading> <div className="w-6 h-6 text-red-500 absolute right-6 top-6 stroke-2"> <AlertTriangle className="w-6 h-6" /> </div> <p className="mt-3 text-slate-500"> Are you sure you want to delete "Documents"? All contents will be permanently destroyed. </p> <div className="mt-6 flex justify-end gap-2"> <DialogButton className="bg-slate-200 text-slate-800 hover:border-slate-300 pressed:bg-slate-300" onPress={close} > Cancel </DialogButton> <DialogButton className="bg-red-500 text-white hover:border-red-600 pressed:bg-red-600" onPress={close} > Delete </DialogButton> </div> </> )} </Dialog> </Modal> </ModalOverlay> </DialogTrigger> </div> ); } function DialogButton( { className, ...props } ) { return ( <Button {...props} className={`inline-flex justify-center rounded-md border border-solid border-transparent px-5 py-2 font-semibold font-[inherit] text-base transition-colors cursor-default outline-hidden focus-visible:ring-2 ring-blue-500 ring-offset-2 ${className}`} /> ); } 

Tailwind config#

This example uses the following plugins:

When using Tailwind v4, add them to your CSS:

@import "tailwindcss"; @plugin "tailwindcss-react-aria-components"; @plugin "tailwindcss-animate";
@import "tailwindcss"; @plugin "tailwindcss-react-aria-components"; @plugin "tailwindcss-animate";
@import "tailwindcss"; @plugin "tailwindcss-react-aria-components"; @plugin "tailwindcss-animate";
Tailwind v3

When using Tailwind v3, add the plugins to your tailwind.config.js instead:

module.exports = { // ... plugins: [ require('tailwindcss-react-aria-components'), require('tailwindcss-animate') ] };
module.exports = { // ... plugins: [ require('tailwindcss-react-aria-components'), require('tailwindcss-animate') ] };
module.exports = { // ... plugins: [ require( 'tailwindcss-react-aria-components' ), require( 'tailwindcss-animate' ) ] }; 

Note: When using Tailwind v3, install tailwindcss-react-aria-components version 1.x instead of 2.x.

Components#


Dialog
A dialog is an overlay shown above other content in an application.
Button
A button allows a user to perform an action.