Toast

Setup

Make sure to include the <Toaster /> component inside the provider to enable toast notifications.

For installation and setup instructions, see the Getting Started guide.

Recommended: Place this in src/routes/+layout.svelte (SvelteKit root layout)

<script lang="ts">
    import { FeflowProvider, Toaster } from "@dxdns/feflow"
</script>

<FeflowProvider>
    <Toaster />
    {@render children()}
</FeflowProvider>

Usage

Preview
Usage

<script lang="ts">
    import { Button, toast, Toaster } from "@dxdns/feflow"

    const colors = ["error", "success", "warning"]
    const positions = [
        "top-left",
        "bottom-left",
        "top-right",
        "bottom-right",
        "bottom-center",
        "top-center"
    ]
</script>

<Toaster />

<div style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
    {#each colors as color}
        <Button
            onclick={() => {
                toast({ message: color, color: color as any })
            }}
        >
            {color}
        </Button>
    {/each}

    {#each positions as position}
        <Button
            onclick={() => {
                toast({ message: position, position: position as any })
            }}
        >
            {position}
        </Button>
    {/each}

    <Button
        onclick={() => {
            toast({ message: "Duration: 15000", duration: 15000 })
        }}
    >
        Duration: 15000
    </Button>

    <Button
        onclick={() => {
            toast({ message: "closable", isClosable: true })
        }}
    >
        Closable
    </Button>
</div>