FEEDBACKBETA

Toast

A channel-based notification outlet with complete severity surfaces, logical positioning, accessible announcements and deterministic lifetimes.

Signal Message APISSR safeSwipe and pause

GET STARTED

Import and providers

import { provideNeuralMessages } from '@neural-ng/core/message';
import { provideNeuralToast, NeuralToast } from '@neural-ng/core/toast';

export const appConfig: ApplicationConfig = {
  providers: [provideNeuralMessages(), provideNeuralToast()],
};

@Component({ imports: [NeuralToast] })

Basic notification

The service owns messages; the outlet owns presentation, placement, timers and dismissal.

Waiting for a notification

Complete severity surfaces

Severity colors the background, border, content, icon, close control and progress treatment—not only one edge.

Logical positions

Start and end follow document direction. Middle positions use the same accessible outlet and cleanup behavior.

Outlet position

Lifetime, progress and pause

Finite messages share one timer with the progress bar. Hover and focus pause both. Use duration: null for persistent work.

Show progress

Enable showProgress to expose the remaining lifetime visually. The indicator pauses and resumes with the message timer.

Icons

Automatic Neural Icons follow severity. Disable them with icon=false or replace all with iconClass.

Independent channels

Route notifications to independent outlets such as global, billing or uploads without coupling feature code to presentation.

Unstyled and class ownership

Unstyled mode retains channels, timers, live regions, swipe and structural hooks while every visual class moves to the consumer.

TOAST

API

Outlet configuration stays separate from the serializable message contract.

Toast inputs

Name	Type	Default	Purpose
channel	string	'global'	Selects the Message API stream.
position	NeuralToastPosition	'top-end'	Logical viewport placement.
icon	boolean	true	Shows the decorative severity icon.
iconClass	string	''	Overrides the automatic severity icon.
showProgress	boolean	false	Shows finite lifetime progress.
pauseOnInteraction	boolean	true	Pauses on hover and focus.
swipeToDismiss	boolean	true	Enables pointer swipe dismissal.
swipeThreshold	number	72	Dismissal distance in pixels.
animated	boolean	true	Enables enter and leave motion.
unstyled	boolean	false	Removes NeuralNg visual classes.
toastClass	string	''	Adds classes to the outlet.
messageClass	string	''	Adds classes to every message.

Message API

notify() returns a reference with id, closed and closeReason Signals plus dismiss(). The service also exposes dismiss(id) and clear(channel?). Message payloads accept severity, title, message, channel, duration, dismissible and data.

Position union

top-starttop-centertop-endmiddle-startmiddle-centermiddle-endbottom-startbottom-centerbottom-end

TOAST

Design tokens

Severity surfaces derive from semantic color tokens while preserving theme and consumer overrides.

Toast tokens

--neural-toast-width

Toast stack inline size.

--neural-toast-inset

Toast stack logical inset from its containing edge.

--neural-toast-stack-gap

Spacing between stack items.

--neural-toast-message-padding

Message internal spacing.

--neural-toast-message-background

Message background surface.

--neural-toast-message-border-color

Message border color.

--neural-toast-message-radius

Message corner radius.

--neural-toast-message-shadow

Message box shadow.

--neural-toast-primary-color

Primary severity foreground color.

--neural-toast-secondary-color

Secondary severity foreground color.

--neural-toast-info-color

Info severity foreground color.

--neural-toast-success-color

Success severity foreground color.

--neural-toast-warning-color

Warning severity foreground color.

--neural-toast-error-color

Error severity foreground color.

--neural-toast-progress-height

Progress block size.

--neural-toast-enter-duration

Toast stack enter animation duration.

--neural-toast-leave-duration

Toast stack leave animation duration.

Primary

Surface