Confirm Dialog

v0.1.2

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

View as Markdown

Install

npx shadcn@latest add @signalos/confirm-dialog

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/alert-dialog) are pulled automatically.

Preview

Example & code

confirm-dialog.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

ConfirmDialogProps

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

Supporting types

export type ConfirmDialogVariant = "default" | "destructive"

export type ConfirmDialogSize = "default" | "sm"

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.