Animated Dialog

Animating a modal Dialog and its backdrop element using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.

Dialog Button Animated CSS transitions

Edit example

123456789101112131415161718192021222324252627282930
import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  const dialog = Ariakit.useDialogStore();
  return (
    <>
      <Ariakit.Button onClick={dialog.show} className="button">
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        store={dialog}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Success
        </Ariakit.DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </>
  );
}

import * as Ariakit from "@ariakit/react";
import "./style.css";

export default function Example() {
  const dialog = Ariakit.useDialogStore();
  return (
    <>
      <Ariakit.Button onClick={dialog.show} className="button">
        Show modal
      </Ariakit.Button>
      <Ariakit.Dialog
        store={dialog}
        backdrop={<div className="backdrop" />}
        className="dialog"
      >
        <Ariakit.DialogHeading className="heading">
          Success
        </Ariakit.DialogHeading>
        <p className="description">
          Your payment has been successfully processed. We have emailed your
          receipt.
        </p>
        <div>
          <Ariakit.DialogDismiss className="button">OK</Ariakit.DialogDismiss>
        </div>
      </Ariakit.Dialog>
    </>
  );
}

Components

DialogOpen a new window that can be either modal or non-modal and optionally rendered in a React portal. This component is based on the WAI-ARIA Dialog Pattern.

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

View all components

Styling

Use the data-enter and data-leave attributes to animate the dialog and the backdrop elements:

.backdrop {
  opacity: 0;
  transition: opacity 200ms;
}

.backdrop[data-enter] {
  opacity: 1;
}

.dialog {
  transform: scale(0.95);
  transition: transform 200ms;
}

.dialog[data-enter] {
  transform: scale(1);
}
.backdrop {
  opacity: 0;
  transition: opacity 200ms;
}

.backdrop[data-enter] {
  opacity: 1;
}

.dialog {
  transform: scale(0.95);
  transition: transform 200ms;
}

.dialog[data-enter] {
  transform: scale(1);
}

You can learn more about these data-* attributes on the Styling guide.

Related examples

Animated DisclosureApplying plain CSS transitions to Disclosure components to animate the DisclosureContent height as it expands and collapses.

Animated ComboboxAnimating a Combobox using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

Animated SelectAnimating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

Animated TabPanelUsing plain CSS transitions to slide in and out TabPanel components as they are expanded.

Command Menu with TabsCombining Dialog, Tab, and Combobox from Ariakit React to build a command palette component.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

View all examples

Animated Dialog

Components

Styling

Related examples

Stay tuned