sileo

The global toast controller. Import it anywhere to fire toasts.

import { sileo } from "sileo";

Methods

Method	Description
sileo.success(options)	Green success toast
sileo.error(options)	Red error toast
sileo.warning(options)	Amber warning toast
sileo.info(options)	Blue info toast
sileo.action(options)	Toast with an action button
sileo.show(options)	Generic toast without a state badge
sileo.promise(promise, opts)	Loading → success/error flow

All methods return the toast id as a string, except promise which returns the original promise.

`ToastOptions`

Passed to every sileo.*() method.

Prop	Type	Default	Description
title	string	—	Toast heading
description	ReactNode \| string	—	Body content, supports JSX
position	ToastPosition	Toaster default	Override position for this toast
duration	number \| null	6000	Auto-dismiss ms. null = sticky
icon	ReactNode \| null	State icon	Custom icon in the badge
fill	string	—	Badge fill color, or "black" for full dark mode
styles	ToastStyles	—	Class overrides for sub-elements
roundness	number	18	Border radius in pixels
autopilot	boolean \| object	true	Auto expand/collapse timing
button	ToastButton	—	Action button config

`ToastButton`

interface ToastButton {
  title: string;
  onClick: () => void;
}

`ToastStyles`

Override classes for individual toast sub-elements.

interface ToastStyles {
  title?: string;
  description?: string;
  badge?: string;
  button?: string;
}

sileo.success({
  title: "Custom styled",
  fill: "black",
  styles: {
    title: "text-white!",
    description: "text-white/75!",
    badge: "bg-white/20!",
    button: "bg-white/10!",
  },
});

`ToastPromiseOptions`

Passed as the second argument to sileo.promise().

interface ToastPromiseOptions<T = unknown> {
  loading: Pick<ToastOptions, "title" | "icon">;
  success: ToastOptions | ((data: T) => ToastOptions);
  error: ToastOptions | ((err: unknown) => ToastOptions);
}

The success and error fields can be static options or callbacks that receive the resolved/rejected value.

sileo.promise(createUser(data), {
  loading: { title: "Creating account..." },
  success: (user) => ({
    title: `Welcome, ${user.name}!`,
  }),
  error: (err) => ({
    title: "Signup failed",
    description: err.message,
  }),
});