Toast (Snackbar) 轻提示(Snackbar) web

Changes saved

标本可交互 —— 点点看。Specimen is live — try it.

Anatomy — every part, named解剖 —— 每个部件的名字

  1. 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. 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. 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播报非紧急更新

See also相关词条