SnippetUI
← Back to snippets

サクセストースト通知

処理が成功したことをユーザーに知らせる、ポップアップ型のトースト通知。

Tailwind CSS

ユーザーのアクション（保存、送信など）が正常に完了したことを画面端に表示して知らせるUIです。

プレビュー (Preview)

ユースケースと特徴 (Use Cases & Features)

  • システムフィードバック: 「保存しました」「送信が完了しました」など、ユーザーのアクションに対する成功結果を即座に伝えます。
  • 非同期処理の通知: バックグラウンドでの処理完了など、ユーザーの作業を妨げずに控えめに通知を行いたい場合に最適です。
  • 自動消去: 通常、一定時間後に自動的にフェードアウトし、画面のスペースを解放します。

デザインとUXのポイント (Design & UX)

  • 控えめな配置: 画面の隅（右下や右上など）に配置することで、メインのコンテンツや作業を邪魔しません。
  • 視覚的な分かりやすさ: 成功を示す緑色（emerald や green）のアイコンと境界線を使用し、直感的にポジティブな通知であることを伝えます。
  • 手動で閉じる機能: ユーザーが自分で通知を消せるように、×（閉じる）ボタンを提供し、コントロール感を高めています。

カスタマイズ方法 (Customization Guide)

  • 状態別のカラー: エラー通知なら赤（red）、警告なら黄色（yellow）、情報なら青（blue）へと、Tailwindクラスを置き換えることで様々な状態に対応できます。
  • アニメーションの追加: 表示される際に下からスライドインするアニメーションや、消える際のフェードアウトアニメーションをCSSやJSで追加できます。

実装コード (Implementation)

<div class="flex items-center w-full max-w-sm p-4 text-gray-800 bg-white dark:bg-zinc-900 dark:text-gray-200 rounded-lg shadow-lg border border-emerald-100 dark:border-emerald-900/30" role="alert">
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-emerald-500 bg-emerald-100 rounded-lg dark:bg-emerald-800/30 dark:text-emerald-400">
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
  </svg>
</div>
<div class="ml-3 text-sm font-medium">Successfully saved changes.</div>
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-zinc-900 dark:hover:bg-zinc-800">
  <span class="sr-only">Close</span>
  <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>