AlertDialog
削除・退会など取り消しできない操作の前にユーザーに確認を求めるダイアログ。操作を中断させて注意を引き、誤操作を防ぐ。
インストール
npx shoji add alert-dialog
プレビュー
使用例
削除・退会・初期化など取り消し不可な操作の前に確認ダイアログを挟む。 ユーザーに「この操作は元に戻せない」という事実を明示する。
パターン
Destructive Confirm
「削除する」赤ボタン + キャンセルの標準削除確認ダイアログ。元に戻せない操作の前に使う基本パターン。
alert-dialogdeletedestructive
Text Confirm
削除対象名を入力させて「削除する」を活性化するハイリスク削除パターン。誤操作リスクが特に高い場面(プロジェクト削除・退会)で使う。
alert-dialogdeletehigh-risk
使い方
こんなときに使う
- データの削除・アカウントの退会など、元に戻せない操作の前
- 保存していない変更を破棄する前の確認
- 重大な設定変更の最終確認
使わないほうがいい場面
- 単純な情報の表示(Dialog を使う)
- 頻繁に表示する確認(ユーザーが慣れて読まなくなる)
- 「OK」「キャンセル」だけのラベル(「削除する」「キャンセル」など動詞にする)
JP 最適化のポイント
- 日本語での確認ダイアログは「〜しますか?」より「〜します。よろしいですか?」のほうが操作内容が明確
- 危険なアクションのボタンは右側・destructive スタイルで配置 — 日本語UIでも右側が「実行」の慣習が定着している