Components / Toast

Toast

A succinct message that is displayed temporarily. Auto-closes on a timer (paused on hover/focus), is swipe-to-dismiss, and announces to assistive tech, all driven by the brain. This preview is the real component running in WebAssembly.

Examples

Wrap your app region in a ZitsToastProvider, render a ZitsToastViewport once, and mount a ZitsToast per notification.

razor

<ZitsToastProvider>
    <ZitsButton Variant="outline" OnClick="Add">Add to calendar</ZitsButton>

    @foreach (var t in _toasts)
    {
        <ZitsToast @key="t" OpenChanged="@(open => OnOpenChanged(t, open))" Timeout="4000">
            <div class="grid gap-1">
                <ZitsToastTitle>Scheduled: Catch up</ZitsToastTitle>
                <ZitsToastDescription>Friday, February 10, 2026 at 5:57 PM</ZitsToastDescription>
            </div>
            <ZitsToastAction AltText="Undo the schedule">Undo</ZitsToastAction>
            <ZitsToastClose />
        </ZitsToast>
    }

    <ZitsToastViewport />
</ZitsToastProvider>

@code {
    private readonly List<int> _toasts = new();
    private int _next;
    private void Add() => _toasts.Add(_next++);
    private void OnOpenChanged(int id, bool open) { if (!open) _toasts.Remove(id); }
}

Installation

Terminal bash

navius add toast

API reference

ZitsToast: a single toast over the brain's Toast.Root.

Prop	Type	Default
Variant	string	"default"
Open	bool	true
DefaultOpen	bool	true
Timeout	int?	-
Priority	string	"low"
ForceMount	bool	false