fma-ds

Confirm Dialog

A ready-made yes/no dialog on top of the use-dialog-promise hook.

OverlayoriginalMITChangelogRegistry JSON

Overview

const ask = useDialogPromise<D>(), render <ConfirmDialog controller={ask} title=… /> once, then const result = await ask.open(data) and check result.status: confirmed, cancelled, or dismissed by Escape.

  • Content: title and description take the opened data when given as functions; media adds an icon.
  • Actions: tone="destructive" marks a destructive action; cancelLabel={null} leaves a single action.
  • `onConfirm`: runs with the dialog open and the button pending; if it throws, the dialog stays open with errorMessage.

For dialogs that collect a value or hold a form, render your own dialog with the same hook and call confirm(value).

Labels default to English; pass translations through the label props.

Installation

  1. 1

    Register the @fma-ds namespace in components.json (once)

    components.json
    {  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}
  2. 2

    Add the item

    pnpm dlx shadcn@latest add @fma-ds/confirm-dialog

    Files land in components/fma-ds/confirm-dialog.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm
cn@^0.5.0lucide-react@^1.61.0
Registry
@fma-ds/alert-dialog@fma-ds/button@fma-ds/use-dialog-promise