Toast

Overview

Toast is an eight-part composite over the unified Navius Toast.Root (manager- or manually-driven; auto-close timer, swipe-to-dismiss, pause-on-hover, an assistive-tech announcer, and discrete enter/exit attributes). ZitsToastProvider renders NaviusToastProvider, ZitsToast renders NaviusToastRoot, ZitsToastContent renders NaviusToastContent (the stacking wrapper that reads the engine’s --toast-index/--toast-offset-y/ --toast-frontmost-height vars to fan out overlapping toasts), ZitsToastTitle/ ZitsToastDescription render NaviusToastTitle/NaviusToastDescription (drive aria-labelledby/aria-describedby), ZitsToastAction/ZitsToastClose render NaviusToastAction/NaviusToastClose, and ZitsToastViewport renders NaviusToastViewport.

Install

navius add toast --to ./src/MyApp --namespace MyApp.Ui

Usage

<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">
            <ZitsToastTitle>Scheduled: Catch up</ZitsToastTitle>
            <ZitsToastDescription>Friday, February 10, 2026 at 5:57 PM</ZitsToastDescription>
            <ZitsToastAction AltText="Undo the schedule">Undo</ZitsToastAction>
            <ZitsToastClose />
        </ZitsToast>
    }

    <ZitsToastViewport />
</ZitsToastProvider>

Parts and props

Prop	Type	Default	Description
`ZitsToast.Variant`	`string`	`"default"`	`default` \| `destructive`. Author-chosen visual variant, computed locally and not forwarded to `NaviusToastRoot`.

ZitsToast otherwise forwards Toast (a ToastObject when manager-driven), Open, OpenChanged, DefaultOpen, Timeout, Priority, Type (manager-driven visual type: success | error | loading, drives data-type), ForceMount, and Attributes straight to NaviusToastRoot, unchanged. ZitsToastProvider forwards Limit, Timeout, Label, SwipeDirection, SwipeThreshold to NaviusToastProvider. ZitsToastAction forwards AltText and OnClick to NaviusToastAction. The docs page’s Usage sample places title/description/ action/close directly inside ZitsToast; ZitsToastContent is a distinct, separately-composable stacking-wrapper part shipped in the same registry item but not shown in that sample.

Styling surface

ZitsToast, ZitsToastContent, ZitsToastAction, ZitsToastClose, ZitsToastTitle, ZitsToastDescription, and ZitsToastViewport accept Attributes, merged via Cn.Merge with the caller’s classes applied last. ZitsToastProvider renders no DOM and takes no Attributes.

Parameter	Values
`Variant`	`default` · `destructive`

Data attribute hooks

Part	Attribute	Description
Toast	`data-swiping`, `data-open`, `data-closed`, `data-limited`	Drive the swipe-follow transform, enter/exit slide/fade, and the hidden state when over the provider’s `Limit`.
Toast	`data-type`	`success` \| `error` \| `loading`, manager-driven visual type; colors the border/opacity.
Content	`data-expanded`, `data-behind`	Drive the collapsed-stack vs. fanned-out layout via `--toast-offset-y`.
Close	(none of its own)	Visibility follows the parent’s `group-hover`/`group-[.destructive]` state.