通知・トースト（Notification / Toast）
操作結果・エラー・お知らせをユーザーに伝えるオーバーレイUIの実装を4つのアプローチで比較。 表示位置・タイプ別スタイル・自動消去・プログレスバー・ローディング更新など、実践的なパターンをインタラクティブに確認できます。
Mantine Notifications
@mantine/notifications パッケージの notifications.show() / update() / hide() / clean() で通知を制御。<Notifications />コンポーネントで表示位置（6方向）をまとめて設定し、loading: true で スピナー付きトーストを出した後、notifications.update() で完了通知に切り替えるパターンが便利。
6方向 positionnotifications.updateloading スピナーautoClose / 手動clean / cleanQueue
読み込み中...
tsx
'use client';
import { MantineProvider, Button } from '@mantine/core';
import { Notifications, notifications } from '@mantine/notifications';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
export function MantineNotificationDemo() {
const showNotification = () => {
notifications.show({
title: '操作が完了しました',
message: '変更が正常に保存されました。',
color: 'green',
autoClose: 4000,
});
};
return (
<MantineProvider>
<Notifications position="top-right" />
<Button onClick={showNotification}>通知を表示</Button>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使った通知・トーストUIを実装してください。 - 使用ライブラリ: @mantine/notifications の notifications.show() / update() / hide() / clean() - <Notifications /> コンポーネントで表示位置（top-left / top-center / top-right / bottom-left / bottom-center / bottom-right の6方向）をまとめて設定すること - color prop で success・error・warning・info のタイプ別スタイルを実装すること - autoClose prop（ミリ秒 / false）で自動消去と手動消去を切り替えられること - loading: true でスピナー付きトーストを表示し、notifications.update(id) で完了通知に切り替えること - notifications.clean() / cleanQueue() で通知をまとめて削除できること
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui（Sonner） | CSS カスタム |
|---|---|---|---|---|
| 表示位置 | ✅ 6方向（top/bottom × left/center/right） | ⚠️ 4隅（topLeft/Right/bottomLeft/Right） | ✅ 6方向（position prop） | ✅ 6方向（自前実装） |
| タイプ別スタイル | ✅ color prop で自由指定 | ✅ success / error / warning / info | ✅ success・error・info・warning | ✅ 4タイプ自作 |
| タイトル＋説明 | ✅ title + message | ✅ message + description | ✅ title + description | ✅ title + message |
| 自動消去 | ✅ autoClose（ms / false） | ✅ duration（秒 / 0） | ✅ duration prop | ✅ setTimeout + clear |
| プログレスバー | ⚠️ 標準なし（プラグインで対応） | ❌ 非対応 | ❌ 非対応 | ✅ CSS animation で自作 |
| ローディング → 完了更新 | ✅ notifications.update(id) | ❌ 非対応 | ✅ toast.promise() | ⚠️ close → show で代替 |
| アクションボタン | ⚠️ message に JSX を渡す | ✅ btn prop で JSX | ✅ action prop | ⚠️ カスタム実装で追加可 |
| バンドルサイズ | ⚠️ @mantine/notifications 追加必要 | ⚠️ antd に含まれる | ✅ 軽量 | ✅ ゼロ追加 |
選択のポイント
- Mantine Notifications — notifications.update(id) でローディング中のスピナー通知を完了通知に切り替えられる点が強力。 ファイルアップロード・API 送信など非同期処理の進捗フィードバックに最適。 6方向のポジション指定・clean / cleanQueue による細かな制御も充実。
- Ant Design — notification と message の2 API を使い分けられる点が特徴。 notification は btn prop でカスタムアクションを追加でき、「元に戻す」「キャンセル」ボタン付き通知を手軽に実装できる。 message.loading の戻り値（hide 関数）で手動消去するパターンも実用的。
- shadcn/ui（Sonner） — シンプルな API で成功・エラー・情報・警告を手軽に表示できる。toast.promise() でローディング→完了の状態変化も1行で書ける。 アニメーションが洗練されており、モダンなデザインと相性が良い。
- CSS カスタム — useToast フックに全ロジックを集約することで、どのコンポーネントからでも呼び出せる。 CSS @keyframes でプログレスバーを実装できる点はライブラリより優れており、 残り時間の視覚的フィードバックが重要な UX では有効な選択肢。依存ゼロで軽量。