Toaster

Class: FxToaster · Tag: <fx-toaster>

<fx-toaster> hosts a stack of alerts at a screen corner (or the top center). Call FxToaster.danger('…') (or info, success, …). Use setup only when you need to change defaults. You rarely place the host in markup yourself.

---

Installation

import '@salsafx/ui';

Press a button to show a toast (sticky stays until you close it):

import { FxToaster } from '@salsafx/ui';

FxToaster.danger('Gearbox oil temp high');
FxToaster.success('Generator online');
FxToaster.info('Pitch calibration in progress. Check hydraulic pressure, yaw encoder offset, and generator temperature before continuing.');
FxToaster.setup({ duration: 0 }).warning('Sticky alarm stays until dismissed');

---

Usage

Setup

Use setup when the defaults are not enough. The handle keeps those options for later show / danger / … calls. A later setup patch merges with the previous handle.

const toast = FxToaster.setup({
    placement: 'top-end',
    duration: 4000,
    margin: 24,
    size: 'large',
});

toast.success('Generator online');
toast.setup({ duration: 1000 }).danger('Short danger');
toast.setup({ alertTheme: 'light' }).info('Pitch calibration in progress');

Defaults: top-center, 4000 ms, margin 16px, variant info, icon on, shadow on at 0.5 opacity, size large. alertTheme follows Fx.configure({ alertTheme }) unless setup overrides it.

Placement

top or bottom, combined with start, center, or end:

top-start · top-center · top-end · bottom-start · bottom-center · bottom-end

Duration

A duration greater than 0 auto-hides the toast. Click the toast to dismiss it early.

duration: 0 keeps the toast until the close control is used.

Size

Toasts use the same x-small, small, medium, and large sizes as Alert. Default is large.

FxToaster.setup({ size: 'x-small' }).info('Pitch calibration in progress');
FxToaster.setup({ size: 'small' }).info('Pitch calibration in progress');
FxToaster.setup({ size: 'medium' }).info('Pitch calibration in progress');
FxToaster.setup({ size: 'large' }).info('Pitch calibration in progress');

Light theme

alertTheme: 'light' uses the same pale fill and dark text as Alert. Variant accent stays on the icon and left rule. App-wide default is Fx.configure({ alertTheme: 'light' }).

const toast = FxToaster.setup({ alertTheme: 'light' });

toast.danger('Gearbox oil temp high');
toast.info('Pitch calibration in progress');

Copy

Long messages wrap. The icon stays vertically centered on the wrapped text.

---

API Reference

FxToaster.setup(patch?)

Field	Type	Default	Description
placement	ToasterPlacement	"top-center"	Screen corner or top/bottom center.
duration	number	4000	Milliseconds. 0 is sticky.
margin	string | number	16	Inset from the viewport edge.
variant	Variant	Info	Default look for show().
icon	string	""	Icon override. Empty uses the variant icon.
hasIcon	boolean	true	Leading icon.
hasShadow	boolean	true	Drop shadow.
shadowOpacity	number	0.5	Drop shadow opacity (0–1). Sets --fx-alert-shadow-opacity on each toast.
backgroundColor	string	""	Fill override on each toast. Empty uses the variant background.
alertTheme	"dark" | "light"	from Fx.configure	Light uses dark text on a pale fill. Empty follows Setup.
size	"x-small" | "small" | "medium" | "large"	"large"	Alert size.

The handle exposes show(text, options?) plus primary, secondary, success, danger, warning, info, light, and dark. Each helper sets that variant. show / helpers return a toast id.

Per-call options may override variant, icon, hasIcon, hasShadow, shadowOpacity, backgroundColor, alertTheme, size, duration, and placement.

Host

Property	Attribute	Type	Default	Description
placement	placement	String	"top-center"	Same tokens as setup.
duration	duration	Number	4000	Default auto-hide for show() on this host.
margin	margin	String | Number	16	Viewport inset.

The same helpers exist on FxToaster itself (FxToaster.danger('…'), …) and use the default setup. The handle from setup is for a custom configuration.

---

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxToaster
    FxElement <|-- FxToaster

See also Architecture, Alert, and Variants.