<Toaster>

Use search to jump between sections.

Overview

<Toaster /> is the global place where Svileo renders toast UI and where you can define default positioning, theme, and option defaults.

Example

import { Toaster } from 'svileo';
import 'svileo/styles.css';

<Toaster
  position="top-right"
  offset={24}
  options={{ duration: 4500 }}
  theme="system"
/>;

Props

position

SvileoPosition (optional)

Default toast position (e.g. 'top-right').

offset

SvileoOffsetValue | SvileoOffsetConfig

Distance from the screen edge. Either a single value (number|string) or an object with top/right/bottom/left.

options

Partial<SvileoOptions>

Global defaults applied to every toast triggered under this Toaster.

theme

'light' | 'dark' | 'system'

Color scheme for the toast surfaces.

children

Snippet (optional)

Optional snippet children for advanced/custom rendering.

Offset types

SvileoOffsetValue

`number | string`

SvileoOffsetConfig

Partial<Record<'top' | 'right' | 'bottom' | 'left', SvileoOffsetValue>>