Toast
toastQueues brief transient feedback that can close automatically or manually.
Usage
Basic usage
Imperative call toast(), adjustable anywhere on the page (need to hang a single <ToastProvider/>).
toast({ title: "Copied to clipboard" });Five intonations
tone provides neutral / info / success / warning / danger, aligned with Alert, driving left bar and title coloring.
toast({ title: "Copied to clipboard" }); // neutral
toast({ tone: "info", title: "A new version is available", description: "Click refresh to update." });
toast({ tone: "success", title: "Saved", description: "Changes have been synchronized to the cloud." });
toast({ tone: "warning", title: "Partial failure", description: "1 out of 3 items are not synchronized." });
toast({ tone: "danger", title: "Save failed", description: "Network abnormality, please try again." });Resident does not disappear automatically
It does not close automatically when timeout=0, you need to manually click × to close.
toast({ title: "Needs to be closed manually", description: "timeout=0, click × to disappear.", timeout: 0 });Stacking
Continuously call stack display (limited to 3 by default for Provider).
toast({ tone: "info", title: "Article 1" });
toast({ tone: "neutral", title: "Article 2" });
toast({ tone: "danger", title: "Article 3" });When to use
Use Toast for brief imperative feedback after an action, such as Saved, Copied, or Save failed. Toasts dismiss automatically and stack in a queue limited to three. Use Alert for persistent feedback in a section, Banner for a full-width announcement, or Notification for richer content and actions. Mount ToastProvider once in the application or segment layout; business code calls toast().
Import
import { toast, ToastProvider } from "@hulianui/ui"Props
ToastOptions passed to toast(options):
Slots
ToastOptions passed to toast(options):
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Bold primary line. |
| description | ReactNode | Muted secondary line. |
Mount ToastProvider once in a root or segment layout. Optional children pass through, so both <ToastProvider><App/></ToastProvider> and a self-closing provider beside the application are valid.
Example
<ToastProvider>{children}</ToastProvider>
// Or as a sibling
<><App /><ToastProvider /></>
toast({ tone: "info", title: "Update available", description: "Refresh to update." })
toast({ tone: "success", title: "Saved", description: "Changes are synchronized." })
toast({ tone: "warning", title: "Partially complete", description: "One of three items did not sync." })
toast({ tone: "danger", title: "Save failed", description: "Check the network and retry." })
toast({ title: "Close manually", timeout: 0 })Usage guidelines
- Mount one ToastProvider per application segment. Repeating it in pages or showcases duplicates imperative rendering.
- Before
@hulianui/ui0.8, ToastProvider did not render children and wrapper usage could silently blank the app. Use a self-closing provider on those versions; 0.8 and later pass children through. - In versions through 0.8, ToastTone exposed only
info | danger | neutral; success and warning required a semantic fallback. Later versions support both directly. - Only danger uses
priority: "high"and assertive live announcements. Warning and other tones remain polite intentionally. - Base UI test caveats are documented in [[base-ui-toast-close-aria-hidden-query-dom-not-role]]: an unfocused Close button can be
aria-hidden, live announcements can duplicate title text, and the global manager must be cleared between tests. The close control's built-in Chinese label is"\u5173\u95ed", meaning “Close.”
Related
Alert · Banner · Notification · ServiceMessage · Result · GiftFeed
Playground
toast({
tone: "neutral",
title: "Saved",
description: "Changes synchronized successfully.",
timeout: 5000,
})