# Confirm Dialog (`confirm-dialog`) - SignalOS widget

> Generic confirm/cancel dialog for destructive or blocking actions, with default/destructive variants and a confirming (loading) state.

- **Version:** 0.1.2
- **Kind:** widget · **Category:** layout
- **Install:** `npx shadcn@latest add @signalos/confirm-dialog`
- **Registry dependencies (pulled automatically):** @signalos/tokens, @signalos/utils, @signalos/alert-dialog
- **npm dependencies:** none
- **Files installed:** `src/components/widgets/confirm-dialog/ConfirmDialog.tsx`, `src/components/widgets/confirm-dialog/ConfirmDialog.types.ts`, `src/components/widgets/confirm-dialog/ConfirmDialog.constants.ts`, `src/components/widgets/confirm-dialog/ConfirmDialog.utils.ts`

## Access

This is a private registry: pulling source requires a `SIGNALOS_REGISTRY_TOKEN`
(GitHub fine-grained PAT with read access to the signal-widgets repo) and an
`@signalos` entry in components.json `"registries"`. Previews and this document are public.

## Usage

```tsx
import { ConfirmDialog } from "@/components/widgets/confirm-dialog/ConfirmDialog"
```

## Example

```tsx
// Example: destructive confirmation dialog for a delete action.
import { useState } from "react"

import { ConfirmDialog } from "@/components/widgets/confirm-dialog/ConfirmDialog"

export default function Example() {
  const [open, setOpen] = useState(false)

  return (
    <ConfirmDialog
      open={open}
      onOpenChange={setOpen}
      title="Delete Item"
      description="This action cannot be undone."
      variant="destructive"
      confirmLabel="Delete"
      onConfirm={() => console.info("confirmed")}
    />
  )
}
```

## Props

### `ConfirmDialogVariant`

```ts
export type ConfirmDialogVariant = "default" | "destructive"
```

### `ConfirmDialogSize`

```ts
export type ConfirmDialogSize = "default" | "sm"
```

### `ConfirmDialogProps`

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `open` | `boolean` | yes | - |  |
| `onOpenChange` | `(open: boolean) => void` | yes | - |  |
| `title` | `string` | yes | - |  |
| `description` | `ReactNode` | no | - |  |
| `confirmLabel` | `ReactNode` | no | - |  |
| `cancelLabel` | `ReactNode` | no | - |  |
| `variant` | `ConfirmDialogVariant \| undefined` | no | - |  |
| `size` | `ConfirmDialogSize \| undefined` | no | - |  |
| `onConfirm` | `() => void` | yes | - |  |
| `isConfirming` | `boolean \| undefined` | no | - |  |
| `confirmTestId` | `string \| undefined` | no | - |  |
| `cancelTestId` | `string \| undefined` | no | - |  |
| `dialogTestId` | `string \| undefined` | no | - |  |

## Changelog

# confirm-dialog

## 0.1.2

- `confirmLabel`/`cancelLabel` now accept `React.ReactNode` to support inline
  loading state (e.g. spinner + text) in the confirm action.
- Content sync fix to bring source in line with published registry payload.

## 0.1.0

- Initial release: generic confirm/cancel dialog built on the alert-dialog
  primitive, with default/destructive variants, sm/default sizes, and a
  confirming (loading) state.