Delete Resource

<DeleteResource
  open={open}
  onOpenChange={setOpen}
  resourceType="Zone"
  resourceName="example.com"
  onDelete={handleDelete}
  isDeleting={isDeleting}
/>

Installation

DeleteResource is a block - a CLI-installed component that you own and can customize. Unlike regular components, blocks are copied into your project so you have full control over the code.

1. Initialize Kumo config (first time only)

npx @cloudflare/kumo init

2. Install the block

npx @cloudflare/kumo add DeleteResource

3. Import from your local path

// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";

Why blocks? Blocks give you full ownership of the code, allowing you to customize deletion flows to fit your specific needs. They're ideal for critical actions that often need project-specific modifications.

Usage

import { useState } from "react";
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";
import { Button } from "@cloudflare/kumo";

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

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      await deleteZone("example.com");
      setOpen(false);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

Examples

Worker Deletion

Works with any resource type - just change the resourceType and resourceName props.

<DeleteResource
  open={open}
  onOpenChange={setOpen}
  resourceType="Worker"
  resourceName="api-gateway-worker"
  onDelete={handleDelete}
  isDeleting={isDeleting}
/>

Error State

Use the errorMessage prop to show an error message.

export default function Example() {
  const [open, setOpen] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);
  const [errorMessage, setErrorMessage] = useState<string>("");

  const handleDelete = async () => {
    setIsDeleting(true);
    setErrorMessage("");
    try {
      await deleteZone("example.com");
      setOpen(false);
    } catch {
      setErrorMessage("Failed to delete Zone");
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Zone
      </Button>
      <DeleteResource
        open={open}
        onOpenChange={setOpen}
        resourceType="Zone"
        resourceName="example.com"
        onDelete={handleDelete}
        isDeleting={isDeleting}
      />
    </>
  );
}

API Reference

Prop	Type	Default	Description
size	`"sm" \| "base"`	`"base"`	-
open*	`boolean`	-	Whether the dialog is open
resourceType*	`string`	-	The type of resource being deleted (e.g., "Zone", "Worker", "KV Namespace")
resourceName*	`string`	-	The name of the specific resource being deleted
isDeleting	`boolean`	-	Whether the delete action is in progress
caseSensitive	`boolean`	-	Whether the confirmation input should be case-sensitive (default: true)
deleteButtonText	`string`	-	Custom delete button text (defaults to "Delete {resourceType}")
className	`string`	-	Additional className for the dialog
errorMessage	`string`	-	Error message to display if the delete action fails