Feedback & status

AppToast

Surface-card toasts — variant icon, quiet auto-dismiss that pauses on hover, swipe to dismiss. No toast library.

WUI.toast(message, options) · mount <app-toast />

A toast is a brief, self-dismissing message — "Saved", "Something went wrong". Call WUI.toast(msg, options) from anywhere on your Razor page — a form submit handler, an async operation, a click listener. Each toast is a surface card with a variant icon; it auto-dismisses quietly (pausing while hovered or focused) and can be dragged aside to dismiss. Place <app-toast /> once in your layout to set the position and stack size (the Razor counterpart of React's <AppToast />); without it, toasts default to the bottom-right.

Toasts are transient feedback — they auto-dismiss and do not require user action. For persistent feedback that stays until the state changes, use <app-alert> instead.

Playground

Toast has no persisted inline preview — it's a JS call that raises a transient card, not markup a server round-trip can render. So unlike the other playgrounds on this site, this one does not round-trip through the query string: position, max-visible, animation, shape and surface live-update the <app-toast> host mounted in the canvas below (the same attributes <app-toast> takes in your layout); the rest build the WUI.toast(message, options) call fired on click.

message variant title duration position max-visible animation shape surface action button progress track id

WUI.toast('Playground toast');

id re-raises update the toast in placeBoth buttons above use the same id field — the second call replaces the first toast's content instead of stacking a new one, which is how a progress/status toast refreshes without flicker (see "Task progress" below).

Raising a toast

Call WUI.toast(message, options) with a message and optional settings for variant, title, duration, action buttons, and deduplication. Identical messages de-dupe while on screen.

Toast variants

Four tones match Bootstrap's status colors: success (green), info (blue), warning (yellow), danger (red).

Show code

WUI.toast('Project saved', { variant: 'success' });
WUI.toast('Note this', { variant: 'info' });
WUI.toast('Changes not saved', { variant: 'warning', title: 'Warning' });
WUI.toast('Server unreachable', { variant: 'danger' });

Mount the container once<app-toast /> lives once in your layout (e.g. _Layout.cshtml), not per page. WUI.toast() calls feed it from anywhere — a form handler, a click listener, a fetch failure. The React counterpart is <AppToast /> + toast().

Action, sticky, rich body & dismiss-all

An action button, a sticky toast (duration 0), a rich HTML body, and clearing the whole stack.

Show code

WUI.toast('File moved to trash', { action: { label: 'Undo', onClick: restoreItem } });
WUI.toast('Processing…', { duration: 0, variant: 'info', title: 'In progress' });
WUI.toast('Export ready — download it.', { variant: 'success', title: 'Export', html: 'Export ready — <a href="#AppToast">download it</a>.' });

// clear the whole stack (e.g. on route change)
WUI.dismissAllToasts();

Pause & swipeEach toast auto-dismisses after its duration; hovering or focusing it pauses the countdown, so it never disappears mid-read. Drag a toast sideways to dismiss it. Past max-visible the oldest collapse to a “+N more” chip. Sticky toasts (duration: 0) always render a close button.

Entrance animation & shape

Four entrances — rise (default), organic (the surface materializes while the status icon grows from a dot and the message trails in — modelled frame-by-frame on Ivan Bjelajac's notification study), jelly (squash-and-stretch drop), spring (elastic slide-up) — and three corner treatments. Set defaults on <app-toast animation="…" shape="…" />, override per toast. All entrances are disabled under prefers-reduced-motion.

Show code

WUI.toast('Changes saved', { variant: 'success', animation: 'organic' });
WUI.toast('Pill shape', { variant: 'success', animation: 'organic', shape: 'pill' });

<!-- or set defaults for every toast, once in _Layout.cshtml -->
<app-toast animation="organic" shape="pill" />

Task progress

progress (0–100) renders a determinate track + percent in the body — an upload, an export. Pair it with duration: 0 and an id, then re-raise with the same id as the work advances: the toast updates in place. This shows work advancing — the opposite of a dismiss countdown (which the toast deliberately does not show).

Show code

WUI.toast('Please wait while we upload your file.', {
    id: 'upload', duration: 0, variant: 'info',
    title: "Uploading 'toasts-FINAL06.fig'", progress: 20,
    action: { label: 'Cancel', onClick: cancelUpload }
});
// …later, same id — updates in place:
WUI.toast('Please wait while we upload your file.', { id: 'upload', duration: 0, progress: 80, title: "Uploading 'toasts-FINAL06.fig'" });
WUI.toast('Upload complete', { id: 'upload', variant: 'success', progress: 100, duration: 4000 });

When to use

Use a toast for:

A brief confirmation or success message ("Saved", "Copied").
A transient error that does not block the flow (background task failed).
A status update from a long operation (upload progress, processing).

Do not use a toast for:

A message that requires user action before continuing → use <app-confirm-dialog> instead.
A persistent validation error or status that stays until the state changes → use <app-alert> instead.
An explanation or hint text that should always be visible → use <app-alert accent="true" role="none"> instead.

Every option

The whole surface of WUI.toast(), one cell per value — click a button to raise that exact toast.

variant — all four

variant: 'success'

variant: 'info'

variant: 'warning'

variant: 'danger'

duration — including sticky (0)

duration: 0 (sticky)

duration: 3000

duration: 5000 (default)

duration: 10000

animation — all four entrances

animation: 'rise'

animation: 'organic'

animation: 'jelly'

animation: 'spring'

shape — all three corner treatments

shape: 'rounded'

shape: 'pill'

shape: 'sharp'

surface — auto vs inverse

surface: 'auto'

surface: 'inverse'

title & action

title only

action only

title + action

sticky + action (needs a close button)

progress — determinate track

progress: 0

progress: 35

progress: 100

id re-raise — in-place update

id: 'demo-cell' (first call — creates the toast)

id: 'demo-cell' (second call — replaces the first in place)

message body — rich content & overflow

html: '…' — trusted markup body with a link

long message — wraps inside the fixed-width card

async — toast.promise

(no Razor equivalent)

No async promise helper on this surfacetoast.promise() is a React-only convenience (a loading toast that swaps to success/error when a promise settles). On Razor, call WUI.toast() yourself at each stage — see the Task progress example above for the same id-refresh pattern.

Attributes

The <app-toast> host sets the stack position, cap, and per-toast defaults. WUI.toast(message, options)'s second parameter is an options object; all properties are optional.

Attribute	Type	Default	Description
position	`top-start \| top-center \| top-end \| middle-center \| bottom-start \| bottom-center \| bottom-end`	`bottom-end`	Where the stack anchors.
max-visible	`int`	`4`	Most toasts shown at once; older ones collapse to a "+N more" chip.
animation	`rise \| organic \| jelly \| spring`	`rise`	Default entrance motion for every toast. A per-toast `animation` option overrides it.
shape	`rounded \| pill \| sharp`	`rounded`	Default corner treatment. A per-toast `shape` option overrides it.
surface	`auto \| inverse`	`auto`	`inverse` renders every toast on the opposite surface of the active mode. A per-toast `surface` option overrides it.

Toast options

Option	Type	Default	Description
`variant`	`success \| info \| warning \| danger`	`info`	Drives the variant icon + its tint.
`title`	`string`	—	Optional bold first line above the message.
`duration`	`number (ms)`	`5000`	Auto-dismiss delay. Use `0` for sticky/persistent toasts (stays until manually dismissed).
`action`	`object`	—	Optional action button: `{ label, onClick }` where `onClick` is a function. Dismissed after click.
`id`	`string`	—	Optional explicit id. A toast with the same id replaces any existing one instead of stacking.
`html`	`string`	—	Trusted HTML body (links, formatting) in place of the plain-text `message`. Author-controlled only — never pass user input.
`animation`	`rise \| organic \| jelly \| spring`	`rise`	Entrance motion. Overrides the `<app-toast animation>` host default.
`shape`	`rounded \| pill \| sharp`	`rounded`	Corner treatment. Overrides the `<app-toast shape>` host default.
`surface`	`auto \| inverse`	`auto`	`inverse` renders the toast on the opposite surface of the active mode (a dark card in light mode). Overrides the `<app-toast surface>` host default.
`progress`	`number (0–100)`	—	Determinate task-progress track + percent in the body. Pair with `duration: 0` and an `id`, then re-raise with the same id — the toast updates in place.

The imperative API

Call: WUI.toast(message, options) — message is plain text, or use the html option for a trusted markup body. options = {variant, title, duration, action: {label, onClick}, id, html, animation, shape, surface, progress}.

Sticky: duration: 0 keeps the toast until it is dismissed.

Dedup: id replaces any existing toast with the same id in place instead of stacking.

Clear all: WUI.dismissAllToasts() — remove every toast (e.g. on navigation).

Playground

Raising a toast

Action, sticky, rich body & dismiss-all

Entrance animation & shape

Task progress

When to use

Every option

variant — all four

duration — including sticky (0)

animation — all four entrances

shape — all three corner treatments

surface — auto vs inverse

title & action

progress — determinate track

id re-raise — in-place update

message body — rich content & overflow

async — toast.promise

Attributes

Toast options

Related