Svelte-Sileo.

An opinionated toast component for Svelte. Gooey SVG morphing, spring physics, and a minimal API — beautiful by default.

GitHub

Quick Setup

Code

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

<Toaster position="top-right" />

<button onclick={() => sileo.success({ title: 'Changes saved' })}>
  Show Toast
</button>

Playground

Mode

Single mode enabled.

Position

Available positions: top-left, top-center, top-right, bottom-left, bottom-center, bottom-right.

Documentation

Reference

Core API

Use id for deterministic replacement behavior.

Code

import { sileo } from 'svelte-sileo';

sileo.setPosition('bottom-center');
sileo.setMultiple(true);
sileo.setOptions({ duration: 3000 });

const id = sileo.success({ title: 'Queued' });
sileo.dismiss(id);
sileo.clear();

Action Examples

Success

Code

sileo.success({ title: 'Changes saved' });

Error

Code

sileo.error({
  title: 'Something went wrong',
  description: 'Please try again later.'
});

Warning

Code

sileo.warning({ title: 'Storage almost full' });

Info

Code

sileo.info({ title: 'New update available' });

Action

Code

sileo.action({
  title: 'File uploaded',
  description: 'Share it with your team?',
  button: { title: 'Share', onClick: () => {} }
});

Custom Icon

Code

import RocketIcon from './RocketIcon.svelte';

sileo.success({
  title: 'Deployed',
  icon: RocketIcon
});

Promise

Code

sileo.promise(new Promise((r) => setTimeout(r, 2000)), {
  loading: { title: 'Saving record...' },
  success: { title: 'Record saved' },
  error: { title: 'Failed to save' }
});

Toaster Props

position offset multiple options

Code

<Toaster
  position="top-right"
  multiple={false}
  offset={8}
  options={{
    duration: 6000,
    autopilot: { expand: 150, collapse: 4000 }
  }}
/>

Important Options

duration: null keeps toast persistent.

autopilot: false disables auto expand/collapse.

icon: null hides the icon badge.

description: Component renders custom Svelte content.

Description as Component

You can pass a Svelte component to description for rich content.

Code

import InvoiceToast from './InvoiceToast.svelte';

sileo.success({
  title: 'Invoice sent',
  description: InvoiceToast,
  button: { title: 'View', onClick: () => {} }
});

Styling

Control background with fill and override classes per part with styles.

Code

sileo.success({
  title: 'Dark mode',
  fill: '#171717',
  styles: {
    title: 'text-white',
    description: 'text-neutral-300',
    badge: 'bg-white/10',
    button: 'bg-white/10 hover:bg-white/20'
  }
});