Skip to content
zedkit
@zedtech/zedkit-ui

ConfirmDialog

A one-call destructive confirmation (trigger, title, description, onConfirm).

Stable@zedtech/zedkit-ui

Wraps: @radix-ui/react-dialog

Website relaunch

Active
View props table
Who is it for?
Developers guarding delete/revoke/remove actions.
When should I use it?
Before any irreversible action.
When should I pick something else?
For reversible or trivial actions — do it and offer undo (toast) instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/confirm-dialog instead.

Delete confirmation
import { Button, ConfirmDialog } from "@zedtech/zedkit-ui";
<ConfirmDialog trigger={<Button>Delete</Button>} title="Delete item?"
  description="This cannot be undone." onConfirm={() => {}} />

Custom button labels

Production key, created 12 March

In use
import { Button, ConfirmDialog } from "@zedtech/zedkit-ui";
<ConfirmDialog
  trigger={<Button variant="outline">Revoke</Button>}
  title="Revoke access?"
  description="API keys stop working immediately."
  confirmLabel="Revoke"
  cancelLabel="Keep access"
  onConfirm={() => revoke()}
/>

Kit not installed yet?

You get
Every component from one import, with the theme tokens included. Updates arrive with your package manager.
You need
  • React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

  1. Install

    Terminal
    pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

  2. Load the styles

    Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

    src/app/globals.cssReplace the contents
    @import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

  3. Pick a look

    Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

    src/app/layout.tsxReplace the contents
    import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

  4. Load the fonts

    The Glass look uses Inter and Space Grotesk; these imports self-host them.

    src/app/fonts.tsCreate the file
    import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";

  5. Import and render

    src/app/page.tsxReplace the contents
    "use client";

import { Button, ConfirmDialog } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <ConfirmDialog trigger={<Button>Delete</Button>} title="Delete item?"
        description="This cannot be undone." onConfirm={() => {}} />
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Accessibility

Opens a Radix dialog (role="dialog") with DialogTitle and DialogDescription; focus stays inside while open; Escape and Cancel dismiss without calling onConfirm. vitest-axe covers the open state in packages/ui/tests/unit/a11y.test.tsx ("confirm dialog after opening").

Troubleshooting

`onConfirm` runs synchronously then closes — start async work inside the handler if needed. `trigger` must be one element (use `Button` asChild target). Registry install lists `button` and `dialog` as shadcn dependencies — use `pnpm add @zedtech/zedkit-ui` when you want one dependency graph.

Dialog

Accessible modal dialogs (trigger, content, title, footer) with focus trap and Escape.

Drawer

Slide-in panels from any edge: right-side detail on desktop, bottom sheet on mobile; size sm, md or lg.

On this page

PreviewGuidanceUse itKit not installed yet?PropsAccessibilityRelatedTroubleshooting