---
layout: ~/layouts/MdxDocLayout.astro
title: "Delete Resource"
description: "A confirmation dialog for safely deleting resources, requiring users to type the resource name to confirm."
sourceFile: "blocks/delete-resource"
---

import Heading from "~/components/docs/Heading.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import ComponentExample from "~/components/docs/ComponentExample.astro";
import CodeBlock from "~/components/docs/CodeBlock.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import Callout from "~/components/docs/Callout.astro";
import {
  DeleteResourceBasicDemo,
  DeleteResourceErrorDemo,
  DeleteResourceWorkerDemo,
} from "~/components/demos/DeleteResourceDemo";

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

<ComponentSection>
  <ComponentExample code={heroCode}>
    <DeleteResourceBasicDemo client:load />
  </ComponentExample>
</ComponentSection>

<ComponentSection>
  <Heading level={2}>Installation</Heading>
  <p>
    DeleteResource is a <strong>block</strong> - 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.
  </p>
  <div class="space-y-4">
    <div>
      <p>**1. Initialize Kumo config (first time only)**</p>
      <CodeBlock code={`npx @cloudflare/kumo init`} lang="bash" />
    </div>
    <div>
      <p>**2. Install the block**</p>
      <CodeBlock code={`npx @cloudflare/kumo add DeleteResource`} lang="bash" />
    </div>
    <div>
      <p>**3. Import from your local path**</p>
      <CodeBlock
        code={`// The path depends on your kumo.json blocksDir setting
// Default: src/components/kumo/
import { DeleteResource } from "./components/kumo/delete-resource/delete-resource";`}
        lang="tsx"
      />
    </div>
  </div>
  <Callout type="info">
    <strong>Why blocks?</strong> 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.
  </Callout>
</ComponentSection>

<ComponentSection>
  <Heading level={2}>Usage</Heading>
  <CodeBlock
    code={`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}
  />
</>
); }`} lang="tsx" />

</ComponentSection>

<ComponentSection>
  <Heading level={2}>Examples</Heading>

<Heading level={3}>Worker Deletion</Heading>
<p>
  Works with any resource type - just change the resourceType and resourceName
  props.
</p>
<ComponentExample
  code={`<DeleteResource
  open={open}
  onOpenChange={setOpen}
  resourceType="Worker"
  resourceName="api-gateway-worker"
  onDelete={handleDelete}
  isDeleting={isDeleting}
/>`}
>
  <DeleteResourceWorkerDemo client:load />
</ComponentExample>

  <Heading level={3}>Error State</Heading>
  <p>
    Use the errorMessage prop to show an error message.
  </p>
  <ComponentExample
    code={`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}
      />
</>
);
}`} >
<DeleteResourceErrorDemo client:load />
</ComponentExample>
</ComponentSection>

<ComponentSection>
  <Heading level={2}>API Reference</Heading>
  <PropsTable component="DeleteResource" />
</ComponentSection>
