Toast

Call toast() from any component. Toasts stack at the bottom of the screen, pause while hovered, and can carry action buttons.

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import { toast } from '@sivir-ui/svelte/components/toast';

    function deploy() {
        toast.success('Deployment ready', {
            description: 'sivir.dev is now live.',
            actions: [
                {
                    label: 'Visit',
                    callback: () => {
                        window.open('https://sivir.dev', '_blank');
                    }
                }
            ]
        });
    }
</script>

<div class="flex items-center justify-center">
    <Button onclick={deploy}>Deploy</Button>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add toast

Usage

Mount <Toaster /> once in your root layout; toast() does nothing until one is mounted. Toasts close after 5.6 seconds unless you pass duration.

import { Button } from '@sivir-ui/svelte/components/button';
import { toast, Toaster } from '@sivir-ui/svelte/components/toast';

<!-- Mount once, usually in your root layout -->
<Toaster />

<Button
  onclick={() =>
    toast.success('Saved to drafts', {
      description: 'Publish it from the Drafts tab.'
    })}
>
  Save
</Button>

Examples

All types

Trigger toast notifications:

<script lang="ts">
    import { Button } from '@sivir-ui/svelte/components/button';
    import { toast } from '@sivir-ui/svelte/components/toast';
    import * as Typography from '@sivir-ui/svelte/components/typography';
</script>

<div class="flex flex-col gap-2">
    <div>
        <Typography.Metadata class="block mb-2">Trigger toast notifications:</Typography.Metadata>
        <div class="flex flex-wrap gap-2">
            <Button
                variant="outline"
                onclick={() =>
                    toast({ title: 'Link copied', description: 'Paste it anywhere.' })}
            >
                Copy link
            </Button>
            <Button
                onclick={() =>
                    toast.success('Saved', { description: 'Your draft was saved automatically.' })}
            >
                Save
            </Button>
            <Button
                variant="outline"
                onclick={() =>
                    toast.error('Upload failed', { description: 'The file is too large. Max 50 MB.' })}
            >
                Upload (error)
            </Button>
            <Button
                variant="outline"
                onclick={() =>
                    toast.warning('Trial ends soon', { description: 'Upgrade in 7 days to keep using pro features.' })}
            >
                Trial info
            </Button>
            <Button
                variant="outline"
                onclick={() => toast.info('New feature available', { description: 'Reload to see the latest updates.' })}
            >
                Info
            </Button>
        </div>
    </div>
</div>

Anatomy

Toast - Renders a single notification.

Toaster - Hosts the toast stack. Mount it once; toast() needs it.