Toast (Snackbar) 轻提示(Snackbar) web
A brief, non-blocking message that appears after an action
操作完成后短暂出现、不打断流程的消息
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Toast viewportToast 视口
Toaster“The corner where all the little messages stack” is the toast viewport.
“所有小消息堆在一起的那个角落”就是 Toast 视口。
Prompt fragmentPrompt 片段the shadcn/ui Toaster viewport anchored to a consistent screen corner for the toast stack
shadcn/ui 的 Toaster 视口,固定在屏幕同一角落,供 Toast 堆叠
-
2 Status message状态消息
role="status"“The saved successfully text that appears by itself” is the toast's status message.
“自己冒出来的‘保存成功’文字”就是 Toast 的状态消息。
Prompt fragmentPrompt 片段the concise role="status" message inside the toast, announced politely without moving focus
Toast 内部简洁的 role="status" 消息,以 polite 方式播报且不移动焦点
-
3 Toast actionToast 操作按钮
ToastAction“The Undo button inside the temporary message” is the toast action.
“临时消息里的‘撤销’按钮”就是 Toast 操作按钮。
Prompt fragmentPrompt 片段a shadcn/ui ToastAction inside the toast for one safe, time-sensitive follow-up such as Undo
Toast 内部的 shadcn/ui ToastAction,提供一个安全且有时效的后续操作,比如撤销
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Show a Toast (Snackbar) through a role="status" live region after the action succeeds. Place it in a consistent corner without blocking the page, auto-dismiss only nonessential messages after a short delay, and pause that timer while the toast is hovered or contains keyboard focus.
操作成功后,通过 role="status" 实时区域显示一条 Toast(Snackbar)。把它固定在同一个角落且不遮挡页面;只给非关键消息设置短暂延时后自动消失,并在指针悬停或键盘焦点落在 Toast 上时暂停计时。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my toast (aria-live region, sonner). Rule out: no aria-live region so screen readers never announce it; the auto-dismiss timer not pausing on hover/focus; stacked toasts overlapping instead of shifting; the exit animation racing the removal so it snaps; toasts rendering under modals because of z-index order. The symptom:
调试我的 Toast(aria-live 区域、sonner)。逐一排除:没有 aria-live 区域,屏幕阅读器永远不播报;自动消失计时器在悬停或聚焦时没有暂停;堆叠的 Toast 互相重叠而不是依次错位;退出动画和移除不同步导致闪没;z-index 顺序让 Toast 渲染到了模态框下面。症状是:
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| ARIA | role="status" | |
| shadcn/ui | Toaster | |
| Sonner | toast() | |
| ARIA | aria-live="polite" | announces non-urgent updates播报非紧急更新 |