COMPONENT 40 · Feedback & Status
浮动通知
Toast
也叫Toast NotificationGrowl轻提示HUD
短暂浮现并自动消失的非阻塞状态消息。
A brief, non-blocking message that appears temporarily and then dismisses.
ANATOMY & USAGE
结构与使用建议
组成部分
- 浮动容器
- 状态文字
- 可选关闭按钮
适合使用
- 操作结果简单、低风险且无需立即处理时。
不建议使用
- 消息很长、包含关键错误或用户必须采取行动时。
键盘与无障碍
- 使用适当 live region，停留时间足够且可暂停；不要把焦点强制移入通知。
DESCRIBE IT TO AI
这样告诉编程助手
实现浮动通知（Toast）：短暂浮现并自动消失的非阻塞状态消息。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<div class="demo stack">
<button id="show-toast" type="button">保存更改</button>
<div id="toast" role="status" tabindex="0" hidden>更改已保存</div>
</div>