<script>
import { toasts, ToastContainer, FlatToast } from "svelte-toasts";
const showToast = () => {
const toast = toasts.add({
title: 'Success',
description: 'Form submitted successfully',
duration: 3000, // 0 or negative to avoid auto-remove
placement: 'bottom-right',
type: 'info',
theme: 'dark',
placement: 'bottom-right',
showProgress: true,
type: 'success',
theme: 'dark',
onClick: () => {},
onRemove: () => {},
// component: BootstrapToast, // allows to override toast component/template per toast
});
};
</script>
<main class="flex flex-col container items-center mt-10">
<h1 class="text-lg block text-center">Svelte Toasts</h1>
<button on:click={showToast}>Show Toast</button>
<ToastContainer let:data={data}>
<FlatToast {data} />
</ToastContainer>
</main>