AlertDialog

削除・退会など取り消しできない操作の前にユーザーに確認を求めるダイアログ。操作を中断させて注意を引き、誤操作を防ぐ。

インストール

npx shoji add alert-dialog

プレビュー

使用例

削除・退会・初期化など取り消し不可な操作の前に確認ダイアログを挟む。 ユーザーに「この操作は元に戻せない」という事実を明示する。

パターン

Destructive Confirm

「削除する」赤ボタン + キャンセルの標準削除確認ダイアログ。元に戻せない操作の前に使う基本パターン。

alert-dialog
deletedestructive

Text Confirm

削除対象名を入力させて「削除する」を活性化するハイリスク削除パターン。誤操作リスクが特に高い場面(プロジェクト削除・退会)で使う。

alert-dialog
deletehigh-risk

使い方

こんなときに使う

  • データの削除・アカウントの退会など、元に戻せない操作の前
  • 保存していない変更を破棄する前の確認
  • 重大な設定変更の最終確認

使わないほうがいい場面

  • 単純な情報の表示(Dialog を使う)
  • 頻繁に表示する確認(ユーザーが慣れて読まなくなる)
  • 「OK」「キャンセル」だけのラベル(「削除する」「キャンセル」など動詞にする)

JP 最適化のポイント

  • 日本語での確認ダイアログは「〜しますか?」より「〜します。よろしいですか?」のほうが操作内容が明確
  • 危険なアクションのボタンは右側・destructive スタイルで配置日本語UIでも右側が「実行」の慣習が定着している