Dialog and Modal components in Svelte

This repository contains a reusable Svelte component (Dialog.svelte) for displaying customizable, accessible dialogs and modals. There is also a demonstration of various use cases (App.svelte).

https://dialog-svelte.netlify.app/

Usage

Simple copy-paste the component Dialog.svelte into your Svelte project and adjust it as needed. Then import it and its open_dialog function.

import Dialog, { open_dialog } from "./lib/Dialog.svelte"

open_dialog({
    confirm: { text: "Yes", action: () => delete_item(item) },
    cancel: { text: "No", action: () => {} },
    text: "Do you really want to delete the item?",
    modal: true,
})

function delete_item(item: Item) {
    // actually delete the item
}