Radix UIKeyframes

Alert dialog

Identical state contract to Dialog, so it needs no rule of its own.

Every value the manifest allows on this host, single presets and the pairs that compose. The first is what this component ships with. Both stages are the same component, so anything that changes between them is the attribute.

withoutno attribute

with easefuldata-motion="scale-fade"

host writes

data-state="open" | "closed"

easeful matches

[data-motion~="scale-fade"][data-state="closed"]

what runs

animation: motion-exit 150ms

you write

<AlertDialog.Content data-motion="scale-fade" />

Where the attribute goes

The parts this demo composes, and the value each one carries. Everything inside an animated part is that part's content, so the tree stops there.

AlertDialog.Root
AlertDialog.Trigger
AlertDialog.Portal
AlertDialog.Overlaydata-motion="fade"
AlertDialog.Contentdata-motion="scale-fade"

Source

apps/docs/components/demos/radix/alert-dialog.tsx

25 lines

"use client"

import { AlertDialog } from "radix-ui"
import type { DemoProps } from "@/components/demos/props"

export function RadixAlertDialog({ motion }: DemoProps) {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger className="btn">Delete branch</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay className="scrim" data-motion={motion && "fade"} />
        <AlertDialog.Content className="modal" data-motion={motion}>
          <AlertDialog.Title className="panel__title">Delete this branch?</AlertDialog.Title>
          <AlertDialog.Description className="panel__body">
            Same state contract as Dialog, so the same preset covers it with no extra CSS.
          </AlertDialog.Description>
          <div className="modal__actions">
            <AlertDialog.Action className="btn btn--primary">Delete</AlertDialog.Action>
            <AlertDialog.Cancel className="btn">Keep it</AlertDialog.Cancel>
          </div>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  )
}

The whole file, read from disk at build time. Both copies above render from it, and the motion prop is the only difference between them.