Customization

Position

Set a default on Toaster, then override it on individual calls when needed.

<Toaster position="top-right" />

sileo.info({
    title: 'Download started',
    position: 'bottom-center'
});

Supported positions are top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.

Color and shape

Use fill for the toast background and roundness for its corner model.

sileo.action({
    title: 'Custom surface',
    fill: '#1f1f1f',
    roundness: 8,
    button: {
        title: 'Close',
        onClick: (id) => sileo.close(id)
    }
});

Keep enough contrast between the fill, text, badge, and button colors. Test both collapsed and expanded states.

Motion timing

Set --sileo-duration to change the toast’s visual motion. The default is 600ms.

:root {
    --sileo-duration: 500ms;
}

Sileo reads this value when a toast mounts and uses it for its Motion spring and state transitions. People who prefer reduced motion get immediate layout and opacity changes with no transform-heavy entrance or loader motion.

Typed style slots

The styles object changes supported visual values on one toast.

sileo.success({
    title: 'Theme updated',
    styles: {
        titleColor: '#ffffff',
        descriptionColor: '#d4d4d4',
        buttonColor: '#000000',
        buttonBackground: '#ffffff'
    }
});

Use classes when the application already has a class-based styling system.

sileo.info({
    title: 'New comment',
    classes: {
        title: 'notification-title',
        description: 'notification-description',
        button: 'notification-action'
    }
});

Rich descriptions and icons

Sileo accepts Svelte snippets for description and icon.

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

    function showRelease() {
        sileo.info({
            title: 'Release details',
            description: releaseDetails,
            icon: releaseIcon
        });
    }
</script>

{#snippet releaseDetails()}
    <div>
        <strong>Release v2.4</strong>
        <span>Six regions are healthy.</span>
    </div>
{/snippet}

{#snippet releaseIcon()}
    <span aria-hidden="true">R</span>
{/snippet}

<button onclick={showRelease}>Show release</button>

Keep interactive controls in the toast button. Description snippets should explain the state, not contain another focus path.