Toast

アクション結果を画面を遮らずに一時的に通知するインジケーター。Info / Success / Warning / Danger の 4 バリアント。

プレビュー(命令型 API)

ボタンを押すと画面上部中央に Toast が出現します。重ねて出すとスタックします。

通常は 4 秒で自動的に閉じます。Danger は手動で × をクリックするまで残ります (Figma の利用ガイドラインに準拠)。

同期を開始しました

外部システムとの連携処理を実行中です

// 1. layout.tsx でアプリ全体に <Toaster /> を 1 度だけ配置する
import { Toaster } from "@/components/ui/sonner";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

// 2. 任意のコンポーネントから命令型 API で呼び出す
"use client";
import { Button } from "@/components/Button";
import { toast } from "@/lib/toast";

export function SaveButton() {
  return (
    <Button onClick={() => toast.info("同期を開始しました", { description: "外部システムとの連携処理を実行中です" })}>
      クリックで Toast
    </Button>
  );
}

仕様

実装構造

実運用: shadcn の sonner(ui/sonner.tsx)を layout.tsx に配置。命令型 API は src/lib/toast.ts の toast.info() / .success() / .warning() / .danger()
静的見本(Showcase 専用): src/components/Toast.tsx は色・レイアウトを並べて見比べるための非命令型 component。実運用では使わない
両者の className / 寸法は揃っているが、変更時は 両方を同期 する必要あり

寸法・色

min-width 320px / max-width 480px / padding 16px / radius 8px
Shadow: var(--shadow-layer-2)
アイコンは variant カラーの円形バッジ(20px + 内側 padding 4px)に白抜きで表示。全 variant 共通で太字見出し(16px bold)+ 補足説明(14px regular)の2行構成(gap 4px)
閉じるボタン: 32px 角丸(radius-s)、内側 padding 4px
各 variant のボーダー色・バッジ背景色・ティント背景(color-mix() でバリアントカラーを 8% 混色):
- Info: #0066CC (action-primary) / 背景 8%
- Success: #008A4B (status-success) / 背景 8%
- Warning: #FFCC17 (status-warning) / 背景 8%
- Danger: #E01E5A (status-danger) / 背景 8%

挙動・アクセシビリティ

自動消去: Info / Success / Warning は 4 秒 で fade out (デモ実装)。Danger はユーザーが × を押すまで残る
role="status" (info/success) または role="alert" (danger/warning) を自動付与
aria-live: danger/warning は assertive、それ以外は polite
表示位置: 画面上部中央(sonner Toaster、position="top-center")

利用基準

使うべき時

メモ保存・SMS 送信完了などの結果通知
下書き自動保存・同期開始など非破壊な進捗フィードバック
クリップボードへのコピー完了通知
通信失敗など軽微なエラー (再試行ですぐ解決するもの)

使わない時

削除の最終確認など明示的な同意が必要な場面 → Modal を使用
ユーザーアクション (再入力等) なしで解決しないエラー → Modal / Alert を使用
常時参照すべき情報 → 通知一覧 / ステータスバッジを使用

Figma

Figma で Toast コンポーネントを開く ↗