125k

Toast

PreviousNext

一時的に表示される簡潔なメッセージ。

BaseRadixReact Aria
"use client"

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

インストール

次のコマンドを実行します。

pnpm dlx shadcn@latest add toast

トースター コンポーネントを追加します。

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/base/button"

アクション

actionProps にボタンのプロップを渡すと、アクションがレンダリングされます。

const id = toast.add({
  title: "Event created",
  actionProps: {
    children: "Undo",
    onClick() {
      toast.close(id)
    },
  },
})

プロミス

toast.promise を使用すると、非同期タスクが読み込み中、成功、エラーの各状態へと移行するのに合わせて、1 つのトーストを更新できます。

"use client"

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

API リファレンス

マネージャー オプション、スタッキング、スワイプによる閉じ方、プリミティブ API の詳細については、Base UI Toast ドキュメント を参照してください。