Toaster

A toast notification system for temporary messages

Interactive-mode

Installation instructions

Register the BlazorUI services in Program.cs:
```
builder.Services.AddSitecoreBlokUI();
```
Place a single <Toaster /> in your root layout (e.g. MainLayout.razor) so toasts have a host to render into. Set Position once here if you want to override the default bottom-right placement:
```
<Toaster @rendermode="InteractiveServer" />
```
Inject ToastService wherever you want to surface a toast and call Toasts.Show(...).

Divergence from Blok

Imperative service-based API kept; not a declarative composition. Blok wraps the Sonner React library — a JS-specific toast library that uses declarative <Toast><ToastTitle/><ToastAction/></Toast> composition. The equivalent BlazorUI component is Toaster, exposed via the ToastService: inject the service and call Toasts.Show(title, description, variant) from anywhere. This matches how Blazor apps idiomatically manage transient UI notifications. Users coming from Blok looking for "Sonner" will find a stub page here.

Examples

Default

Variants

Closable

With Action Content

With Click Handler

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Toaster	The single toast host. Place one instance in your root layout and surface toasts from anywhere by injecting `ToastService` and calling `Show(...)`.

Toaster

The single toast host. Place one instance in your root layout and surface toasts from anywhere by injecting ToastService and calling Show(...).

Property	Type	Required	Description
Position	ToastPosition		Where the toast stack anchors on screen. Default: `ToastPosition.BottomRight`. Other values: `BottomLeft`, `TopRight`, `TopLeft`, `BottomCenter`, `TopCenter`.