Toast

作業を妨げず、操作結果を一時的に伝える場合に使います。

プレビュー

結果の通知と取り消し

ローカルの成功・エラー、下書き保管の取り消し、自動で閉じる通知を比較します。

下書き利用可能

プレビューを読み込んでいます。

インストール

この Registry を初めて使う場合は、先に基本設定と共通スタイルの導入を完了してください。

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`	`—`	通知領域と閉じるボタンの名前です。