Components / Sonner

Sonner

An opinionated toaster. Mount <ZitsSonner> once near your app root, then enqueue toasts: success, error, or with a description. The auto-close timer, swipe-to-dismiss, pause-on-hover and a11y announcer all come from the brain; this preview is the real component running in WebAssembly.

Examples

Each button enqueues a toast. Toasts auto-dismiss after their duration, on swipe, or via the × close button.

razor

<ZitsSonner>
    <ZitsButton Variant="outline" OnClick="@(() => Show())">Show toast</ZitsButton>

    @foreach (var t in _toasts)
    {
        <ZitsToast @key="t.Id" Open="true"
                   Variant="@(t.Kind == "error" ? "destructive" : "default")"
                   OpenChanged="@(open => OnOpenChanged(t.Id, open))" Timeout="4000">
            <div class="grid gap-1">
                <ZitsToastTitle>@t.Title</ZitsToastTitle>
                @if (t.Description is not null)
                {
                    <ZitsToastDescription>@t.Description</ZitsToastDescription>
                }
            </div>
            <ZitsToastClose />
        </ZitsToast>
    }
</ZitsSonner>

One brain

In this Blazor port Sonner and Toast share one underlying brain: the Navius Toast primitive. ZitsSonner is a thin convenience wrapper that mounts a ZitsToastProvider and a ZitsToastViewport in one shot, so you place it once and render ZitsToast children inside. Prefer imperative toasts? Inject the Navius ToastManager and call Add(...): same queue, same timers.

Layout.razor razor

@* Mount once in your layout *@
<ZitsSonner>
    @* your ZitsToast list / @Body *@
</ZitsSonner>

@* - or, imperatively, on the shared brain - *@
@inject Navius.Primitives.Components.Toast.ToastManager Toast
@code {
    void Notify() => Toast.Add(new ToastOptions(Title: "Event has been created", Type: "success"));
}

Installation

Terminal bash

navius add sonner

API reference

ZitsSonner wraps the provider + viewport. Unmatched attributes splat onto the viewport region.

Prop	Type	Default
Timeout	int	5000
Label	string	"Notification"
SwipeDirection	string	"right"
SwipeThreshold	double	50
ChildContent	RenderFragment?	-