Toast

用于不打断工作流程的临时操作反馈。

预览

结果通知与撤销

尝试本地成功与错误消息、草稿归档后的撤销，以及定时关闭通知。

草稿可用

正在加载预览。

安装

npx shadcn@latest add @neumorphism-ui/toast

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

结果通知与撤销

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/toast

Registry JSON

用法

挂载 ToastProvider 和 Toaster，由子组件通过 useToast 添加通知。提供易读标题，并按消息需要设置显示时间或撤销操作。

"use client";

import { Button } from "@/components/ui/button";
import { Toaster, ToastProvider, useToast } from "@/components/ui/toast";

function NotifyButton() {
  const toast = useToast();
  return <Button onClick={() => toast.add({ title: "Changes saved", type: "success" })}>Show notification</Button>;
}

export default function Example() {
  return <ToastProvider><NotifyButton /><Toaster /></ToastProvider>;
}

API 参考

使用已有Base UI Toast管理生命周期和无障碍行为。本地示例展示成功、错误、撤销和自动关闭，不执行服务器保存。

组件	属性	类型	默认值	说明
`ToastProvider`	`timeout / limit / toastManager`	`number / ToastManager`	`—`	显示时间、数量上限及外部管理器。0禁用自动关闭。
`useToast`	`add / close / update / promise`	`Base UI toast manager methods`	`—`	创建、关闭、更新并跟踪异步通知状态。
`Toaster`	`label / closeLabel`	`string`	`—`	通知区域和关闭按钮的无障碍名称。