<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { DeleteResource } from "kumo-svelte/blocks/delete-resource";
  let open = $state(false);
  let isDeleting = $state(false);

  async function handleDelete() {
    isDeleting = true;
    await new Promise((resolve) => setTimeout(resolve, 1000));
    isDeleting = false;
    open = false;
  }
</script>

<Button variant="destructive" onclick={() => (open = true)}>Delete Zone</Button>
<DeleteResource
  bind:open
  resourceType="Zone"
  resourceName="example.com"
  onDelete={handleDelete}
  {isDeleting}
/>

Import

DeleteResource is a block: a component you own and can customize. The Svelte package currently exports the block directly.

import { DeleteResource } from "kumo-svelte/blocks/delete-resource";

Usage

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { DeleteResource } from "kumo-svelte/blocks/delete-resource";
  let open = $state(false);
  let isDeleting = $state(false);

  async function handleDelete() {
    isDeleting = true;
    try {
      await deleteZone("example.com");
      open = false;
    } finally {
      isDeleting = false;
    }
  }
</script>

<Button variant="destructive" onclick={() => (open = true)}>Delete Zone</Button>
<DeleteResource
  bind:open
  resourceType="Zone"
  resourceName="example.com"
  onDelete={handleDelete}
  {isDeleting}
/>

Examples

Worker Deletion

Works with any resource type — just change resourceType and resourceName.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { DeleteResource } from "kumo-svelte/blocks/delete-resource";
  let open = $state(false);
  let isDeleting = $state(false);

  async function handleDelete() {
    isDeleting = true;
    await new Promise((resolve) => setTimeout(resolve, 1000));
    isDeleting = false;
    open = false;
  }
</script>

<Button variant="destructive" onclick={() => (open = true)}>Delete Worker</Button>
<DeleteResource
  bind:open
  resourceType="Worker"
  resourceName="api-gateway-worker"
  onDelete={handleDelete}
  {isDeleting}
/>

Error State

Use the errorMessage prop to show an error message.

<script lang="ts">
  import { Button } from "kumo-svelte/components/button";
  import { DeleteResource } from "kumo-svelte/blocks/delete-resource";
  let open = $state(false);
  let isDeleting = $state(false);
  let errorMessage = $state("");

  async function handleDelete() {
    errorMessage = "";
    isDeleting = true;
    await new Promise((resolve) => setTimeout(resolve, 1000));
    isDeleting = false;
    errorMessage = "Something went wrong";
  }
</script>

<Button variant="destructive" onclick={() => (open = true)}>Delete Zone</Button>
<DeleteResource
  bind:open
  resourceType="Zone"
  resourceName="example.com"
  onDelete={handleDelete}
  {isDeleting}
  {errorMessage}
/>

API Reference

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controlled open state; supports `bind:open`.
`onOpenChange`	`(open: boolean) => void`	—	Called when the dialog opens or closes.
`resourceType`	`string`	required	Human-readable resource type, such as `Zone` or `Worker`.
`resourceName`	`string`	required	Exact resource name the user must type.
`onDelete`	`() => void \\| Promise<void>`	required	Called after the user confirms deletion.
`isDeleting`	`boolean`	`false`	Disables controls and shows loading while deletion is running.
`errorMessage`	`string`	—	Error banner content.
`deleteButtonText`	`string`	`Delete ${resourceType}`	Custom destructive button label.
`caseSensitive`	`boolean`	`true`	Whether confirmation text comparison is case-sensitive.
`size`	`KumoDeleteResourceSize`	default	Dialog size variant.
`class`	`string`	—	Additional dialog classes.

Usage Notes

Use bind:open to control the dialog. Clipboard copy inside the dialog uses the browser Clipboard API, so headless or restricted browsers may deny copy permission.