---
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 PropsTable from "~/components/docs/PropsTable.astro";
import Callout from "~/components/docs/Callout.astro";
import {
  DeleteResourceBasicDemo,
  DeleteResourceErrorDemo,
  DeleteResourceWorkerDemo,
} from "~/components/demos/DeleteResourceDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="DeleteResourceBasicDemo">
    <DeleteResourceBasicDemo client:load />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<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>

```bash
npx @cloudflare/kumo init
```

</div>
<div>
<p>**2. Install the block**</p>

```bash
npx @cloudflare/kumo add DeleteResource
```

</div>
<div>
<p>**3. Import from your local path**</p>

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

    </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>

{/* Usage */}

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

```tsx
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}
      />
    </>
  );
}
```

</ComponentSection>

{/* Examples */}

<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 demo="DeleteResourceWorkerDemo">
  <DeleteResourceWorkerDemo client:load />
</ComponentExample>

  <Heading level={3}>Error State</Heading>
  <p>
    Use the errorMessage prop to show an error message.
  </p>
  <ComponentExample demo="DeleteResourceErrorDemo">
    <DeleteResourceErrorDemo client:load />
  </ComponentExample>
</ComponentSection>

{/* API Reference */}

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