ConfirmDialog

ConfirmDialog defines how EnterUI handles a focused dialog for confirming a single decision with clear risk hierarchy, including default structure, accessible states, and token-driven styling.

#Default usage

<ConfirmDialog>
  <ConfirmDialogTrigger asChild>
    <Button variant="secondary">Publish package</Button>
  </ConfirmDialogTrigger>
  <ConfirmDialogContent>
    <ConfirmDialogHeader>
      <ConfirmDialogTitle>Publish to npm?</ConfirmDialogTitle>
      <ConfirmDialogDescription>
        This will release version 0.2.0 to the public registry.
      </ConfirmDialogDescription>
    </ConfirmDialogHeader>
    <ConfirmDialogFooter>
      <ConfirmDialogCancel />
      <ConfirmDialogAction>Publish</ConfirmDialogAction>
    </ConfirmDialogFooter>
  </ConfirmDialogContent>
</ConfirmDialog>

#Import

import {
  Button,
  ConfirmDialog,
  ConfirmDialogAction,
  ConfirmDialogCancel,
  ConfirmDialogContent,
  ConfirmDialogDescription,
  ConfirmDialogFooter,
  ConfirmDialogHeader,
  ConfirmDialogTitle,
  ConfirmDialogTrigger,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

ConfirmDialog reuses Radix dialog focus management. Focus moves to the dialog when it opens and returns to the trigger on close. The cancel button is rendered via DialogClose so the Escape key, the backdrop click, and the cancel button all close the dialog. Title and description are linked automatically.

#API

• ConfirmDialogContent: tone = neutral (default) or destructive.
• ConfirmDialogAction: loading sets aria-busy and disables the button. Variant defaults to danger when tone is destructive.
• ConfirmDialogCancel renders a secondary button by default and closes the dialog.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.