svelte-daisy-toast v0.0.2

svelte-daisy-toast

Simple, beautiful toasts in Svelte, with DaisyUI.

Demo

Demo

Getting Started

Make sure you have Tailwind and DaisyUI set up in your project.

1. Install

bun add svelte-daisy-toast

2. Add to layout

<!-- +layout.svelte -->
<script>
    import Toast from 'svelte-daisy-toast';
</script>

<Toast position="bottom-center" />
<slot />

3. Use

<!-- +page.svelte -->
<script>
    import { toast } from 'svelte-daisy-toast';

    function boop() {
        toast({
            title: 'Boop',
            message: 'Hello Svelte!',
            duration: 5000,
            type: 'success'
        });
    }
</script>

<button class="btn" on:click={boop}>I'm a button</button>

Usage

Add to site

Simply <Toast /> to your layout or page.

<script>
    import Toast from 'svelte-daisy-toast';
</script>

<Toast position="bottom-center" />
<slot />

Your position can be top-start, top-center, top-end, bottom-start, bottom-center, bottom-end, middle-start, middle-center, or middle-end. The default is top-center.

Create toasts

import { toast } from 'svelte-daisy-toast';

toast({
    title: '',
    message: '',
    duration: 5000,
    closable: true,
    type = 'info'
});

Close a toast programmatically

import { toast, close } from 'svelte-daisy-toast';

const myToast = toast({
    title: '',
    message: '',
    duration: 5000,
    closable: true,
    type = 'info'
});

close(toast);

Credits/Inspiration

Possible thanks to

• Svelte
• Tailwind
• DaisyUI

Inspiration from

• Svelte French Toast
• ChakraUI Toast Component