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.setup({ duration: 0 }).warning('Sticky alarm stays until dismissed');
FxToaster.setup({ placement: 'top-end' }).info('Pitch calibration in progress');

---

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');

Defaults: top-center, 4000 ms, margin 16px, variant info, icon on, shadow on, size large.

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.

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.
size	"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, 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.