Interactive reference

Notification playground

Run the package against six real scenarios. The source updates with the selected viewport position.

Read the docs

State helpers

Core states

Create a semantic toast with a title, description, and the currently selected viewport.

Live viewportTop right

Runtime values

state: success
duration: 6000ms
autopilot: true

<script lang="ts">
    import { sileo } from 'sileo-svelte';

    const position = 'top-right';

    function run() {
        sileo.success({
            title: 'Release saved',
            description: 'Draft v2.4 is ready for review.',
            position
        });
    }
</script>

<button onclick={run}>Run example</button>