{/* Copyright 2023 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */}

import {ExampleLayout} from '@react-spectrum/docs'; export default ExampleLayout;

import docs from 'docs:react-aria-components'; import {TypeLink} from '@react-spectrum/docs'; import styles from '@react-spectrum/docs/src/docs.css'; import Button from '@react-spectrum/docs/pages/assets/component-illustrations/ActionButton.svg'; import Dialog from '@react-spectrum/docs/pages/assets/component-illustrations/Dialog.svg'; import Link from '@react-spectrum/docs/pages/assets/component-illustrations/Link.svg'; import {ExampleCard} from '@react-spectrum/docs/src/ExampleCard'; import ChevronRight from '@spectrum-icons/workflow/ChevronRight';

Destructive Alert Dialog

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

Example

tsx

import './tailwind.global.css';

tsx

import {DialogTrigger, Button, ModalOverlay, Modal, Dialog, Heading} 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:

css

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

<details> <summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Tailwind v3</summary>

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

tsx

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.

</details>

Components

</section>

Destructive Alert Dialog

keywords: [example, modal, dialog, aria, accessibility, react, component] type: component image: destructive-dialog.png description: An animated confirmation dialog, styled with Tailwind CSS.

Destructive Alert Dialog

Example

Tailwind config

Components