Toast

@inject ToastManager Toast

<button @onclick="AddToCalendar">Add to calendar</button>

<NaviusToastProvider Manager="Toast" Limit="3" SwipeDirection="right">
    <NaviusToastViewport class="fixed bottom-0 right-0 z-[100] flex w-full flex-col gap-2 p-4 sm:w-96">
        @foreach (var t in Toast.Toasts)
        {
            <NaviusToastRoot Toast="t" @key="t.Id"
                class="... bg-popover text-popover-foreground shadow-md rounded-md border
                       data-[open]:slide-in-from-right-full
                       data-[swiping]:translate-x-[var(--toast-swipe-movement-x)]
                       data-[limited]:hidden">
                <NaviusToastContent class="flex items-center justify-between gap-3">
                    <div class="grid gap-1">
                        <NaviusToastTitle class="text-sm font-semibold" />
                        <NaviusToastDescription class="text-sm text-muted-foreground" />
                    </div>
                    <NaviusToastAction class="... bg-transparent border" />
                    <NaviusToastClose aria-label="Close" class="absolute right-1.5 top-1.5">✕</NaviusToastClose>
                </NaviusToastContent>
            </NaviusToastRoot>
        }
    </NaviusToastViewport>
</NaviusToastProvider>

@code {
    private void AddToCalendar() =>
        Toast.Add(new ToastOptions(
            Title: "Scheduled: Catch up",
            Description: "Friday, February 10, 2026 at 5:57 PM.",
            Timeout: 5000,
            Action: new ToastActionProps("Undo", "Undo the calendar invite", OnUndo)));

    private Task OnUndo() => Task.CompletedTask;
}

Features

• Automatically closes on a timer that pauses on hover, focus, and window blur, then resumes.
• Swipe to dismiss, with a configurable SwipeDirection and SwipeThreshold.
• Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
• Announces to assistive technology via polite or assertive live regions, by toast Type.
• A global hotkey (default F8) jumps focus to the viewport from anywhere on the page.
• Exposes a discrete data-open / data-closed contract plus swipe CSS variables for enter, exit, and swipe animations.

Installation

Install the brain, or copy just this primitive in with the CLI.

navius add toast

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Toast
@inject ToastManager Toast

<NaviusToastProvider Manager="Toast">
    <NaviusToastViewport>
        @foreach (var t in Toast.Toasts)
        {
            <NaviusToastRoot Toast="t" @key="t.Id">
                <NaviusToastContent>
                    <NaviusToastTitle />
                    <NaviusToastDescription />
                    <NaviusToastAction />
                    <NaviusToastClose />
                </NaviusToastContent>
            </NaviusToastRoot>
        }
    </NaviusToastViewport>
</NaviusToastProvider>

API Reference

Provider

Cascades configuration (duration, label, swipe) to every descendant toast and viewport, and owns the shared announcer. Renders no DOM of its own.

Viewport

The fixed region that hosts the live toasts. Renders an ol with role=region, plus the visually-hidden live announcer regions.

Data attributes

Root

A single toast. Owns the open lifecycle, the auto-close timer, and the swipe gesture. Renders an li.

Data attributes

During a swipe the engine writes --toast-swipe-movement-x and --toast-swipe-movement-y (px) on the root so CSS transforms can follow the pointer.

Title

The toast's title. Carries the id referenced by the Root's aria-labelledby. Renders a div.

Data attributes

Description

The toast's description. Carries the id referenced by the Root's aria-describedby. Renders a div.

Data attributes

Action

An actionable button inside a toast (e.g. Undo). Activating it closes the toast. AltText is required for assistive tech. Renders a button.

Data attributes

Close

A composable close button that dismisses the toast on click. Renders a button.

Data attributes

Accessibility

Adheres to the alert WAI-ARIA design pattern. A foreground toast renders role="alert" (assertive); a background toast renders role="status" (polite). Title and Description supply aria-labelledby and aria-describedby.

Keyboard interactions