Delete Resource - Kumo Svelte

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { DeleteResource } from '../../../blocks/delete-resource';

  let open = $state(false);
  let isDeleting = $state(false);
  let errorMessage = $state('');

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

<Button variant="destructive" onclick={() => (open = true)}>
  Delete Zone
</Button>

<DeleteResource
  bind:open
  onOpenChange={(nextOpen: boolean) => (open = nextOpen)}
  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 kumo-svelte init

2. Install the block

npx kumo-svelte add DeleteResource

3. Import from your local path

<script lang="ts">  import { DeleteResource } from './components/kumo/delete-resource/delete-resource';</script>

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

<script lang="ts">  import { Button } from 'kumo-svelte';  import { DeleteResource } from './components/kumo/delete-resource/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  onOpenChange={(nextOpen) => (open = nextOpen)}  resourceType="Zone"  resourceName="example.com"  onDelete={handleDelete}  isDeleting={isDeleting}/>

Examples

Worker Deletion

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

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { DeleteResource } from '../../../blocks/delete-resource';

  let open = $state(false);
  let isDeleting = $state(false);
  let errorMessage = $state('');

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

<Button variant="destructive" onclick={() => (open = true)}>
  Delete Worker
</Button>

<DeleteResource
  bind:open
  onOpenChange={(nextOpen: boolean) => (open = nextOpen)}
  resourceType="Worker"
  resourceName="api-gateway-worker"
  onDelete={handleDelete}
  isDeleting={isDeleting}
/>

Error State

Use the errorMessage prop to show an error message.

<script lang="ts">
  import { Button } from 'kumo-svelte';
  import { DeleteResource } from '../../../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, 2000));
    isDeleting = false;
    errorMessage = 'Something went wrong';
  }
</script>

<Button variant="destructive" onclick={() => (open = true)}>
  Delete Zone
</Button>

<DeleteResource
  bind:open
  onOpenChange={(nextOpen: boolean) => (open = nextOpen)}
  resourceType="Zone"
  resourceName="example.com"
  onDelete={handleDelete}
  isDeleting={isDeleting}
  errorMessage={errorMessage}
/>

API Reference

Prop	Type	Default	Description
size	`'sm' \| 'base'`	`"base"`	Dialog size preset.
open *	`boolean`	-	Whether the dialog is open.
resourceType *	`string`	-	Type of resource being deleted, such as Zone, Worker, or KV Namespace.
resourceName *	`string`	-	Name of the resource users must type to confirm deletion.
isDeleting	`boolean`	`false`	Whether the delete action is currently in progress.
caseSensitive	`boolean`	`true`	Whether the confirmation input must match the resource name case exactly.
deleteButtonText	`string`	-	Custom label for the destructive confirmation button.
class	`string`	-	Additional classes merged onto the dialog content.
errorMessage	`string`	-	Error message displayed above the confirmation copy.
onOpenChange *	`(open: boolean) => void`	-	Callback fired when the open state changes.
onDelete *	`() => void \| Promise<void>`	-	Callback fired when the delete action is confirmed.