Toasts

NotificationService · NotificationDisplayControl

Call the service from anywhere; toasts stack in the top-right corner and dismiss themselves.

Overview

NotificationService is a scoped, per-circuit service with four methods: Info, Success, Warning and Error. Each takes a message, an optional detail line and a duration in milliseconds; zero keeps the toast until the user closes it. NotificationDisplayControl, rendered once in the layout, shows the queue fixed to the top-right corner, newest first, twenty at most, each sliding in from the right. No JavaScript.

Examples

#Levels, detail and duration

One call per level. The second argument is the smaller detail line. Defaults: info 5 s, success 4 s, warning 8 s, error 10 s. Pass durationMs: 0 for a toast that stays.

Example

Razor

No toasts showing.

Documentation

NotificationService

Method	Inputs	Returns	Description
`Info()`	`message detail? durationMs = 5000`	`void`	Blue toast.
`Success()`	`message detail? durationMs = 4000`	`void`	Green toast.
`Warning()`	`message detail? durationMs = 8000`	`void`	Yellow toast.
`Error()`	`message detail? durationMs = 10000`	`void`	Red toast. `durationMs: 0` keeps it until dismissed.
`Dismiss()`	`id`	`void`	Removes one toast.
`Clear()`	—	`void`	Removes every toast.
`Notifications`	—	`IReadOnlyList<Notification>`	Current toasts, newest first, at most 20.
`OnChange`	—	`event Action`	Raised after every add, dismiss or clear. Auto-dismiss raises it from a timer thread; marshal with `InvokeAsync`.
`()`	`setup`		`builder.Services.AddScoped<NotificationService>()` and one `<NotificationDisplayControl />` in the layout. This site has both.

Notification

Property	Type	Default	Description
`Id`	`Guid`	—	Key for `Dismiss`.
`Level`	`NotificationLevel`	—	Info, Success, Warning or Error.
`Message`	`string`	—	Bold first line.
`Detail`	`string?`	`null`	Smaller second line.
`Timestamp`	`DateTime`	—	When it was added.
`DurationMs`	`int`	—	Auto-dismiss delay; 0 means sticky.

NotificationDisplayControl has no parameters. It reads the service, re-renders on OnChange, and scales with --fx-zoom when a ZoomService is registered. Position, widths and colors are fixed in its stylesheet.

CSS classes

Class	Effect
`fx-notification-container`	Fixed 12px from the top-right, 320–420px wide, z-index 10000, column with 8px gaps.
`fx-notification · .fx-notification-info / -success / -warning / -error`	One toast; the level class sets the tinted background, text color and 4px left border.
`fx-notification-icon · fx-notification-body · fx-notification-message · fx-notification-detail`	Icon glyph, text column, bold message, 11px detail at 80% opacity.
`fx-notification-close`	The × button, 50% opacity until hovered.
`fx-slide-in`	0.25s slide from the right on entry.

Keyboard and accessibility

The close button is a native <button>; its only text is ×, so screen readers announce it as "times" or "multiplication sign".
The container is a plain <div> with no aria-live region, so a new toast is not announced. Put important outcomes in the page as well, or use a dialog.
Toasts slide in over 0.25 s with no prefers-reduced-motion check.
The container ignores pointer events except on the toasts themselves, so it never blocks the page underneath.