Svelte Delete Confirm (CRUD) - Flowbite Svelte Blocks
Get started with a collection of delete confirmation modal components based on the CRUD layout to make sure the user is ready to remove a selected item.
Default delete confirmation modal #
Use this free example of a modal component coded with Tailwind CSS to confirm with the user before deleting an item from the database.
- Svelte
<script lang="ts">
import { Section } from 'flowbite-svelte-blocks';
import { Button, Modal } from 'flowbite-svelte';
let defaultModal = false;
const handleCancel = () => {
alert('Clicked cancel');
};
const handleDelete = () => {
alert('Clicked delete');
};
</script>
<Section sectionClass="h-96">
<div class="m-5 flex justify-center">
<Button onclick={() => (defaultModal = true)}>Default modal</Button>
</div>
<Modal title="" bind:open={defaultModal} autoclose size="sm" class="w-full">
<svg class="mx-auto mb-3.5 h-11 w-11 text-gray-400 dark:text-gray-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
clip-rule="evenodd"
/></svg
>
<p class="mb-4 text-center text-gray-500 dark:text-gray-300">Are you sure you want to delete this item?</p>
<div class="flex items-center justify-center space-x-4">
<Button color="light" onclick={handleCancel}>No, cancel</Button>
<Button color="red" onclick={handleDelete}>Yes, I'm sure</Button>
</div>
</Modal>
</Section>