121k
New

吐司

PreviousNext

一个暂时显示的简洁消息。

Base UIReact AriaRadix UI
"use client"

import { Button } from "@/components/ui/button"

安装

运行以下命令：

pnpm dlx shadcn@latest add toast

添加 Toaster 组件。

app/layout.tsx
import { Toaster } from "@/components/ui/toast"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

用法

import { toast } from "@/components/ui/toast"
toast.add({
  title: "Event created",
  description: "Sunday, December 3 at 9:00 AM",
})

类型

设置 type 选项以渲染状态图标。内置渲染器支持 success、info、warning、error 和 loading。

"use client"

import { Button } from "@/components/ui/button"

操作

使用 actionProps 传递按钮属性，以渲染操作。

const id = toast.add({
  title: "事件已创建",
  actionProps: {
    children: "撤销",
    onClick() {
      toast.close(id)
    },
  },
})

Promise

使用 toast.promise，随着异步任务经历加载、成功和错误状态，更新同一个 toast。

"use client"

import { Button } from "@/components/ui/button"

API 参考

有关管理器选项、堆叠、滑动关闭以及原始 API 的详细信息，请参阅 Base UI Toast 文档。