ユーザーに確認や操作などを求める場合に使用するモーダルダイアログ

Example#

Props#

NameTypeDefaultDescription
children
required
ReactNode-コンテンツとして表示する内容
onClose
required
() => void-閉じるアクションが実行された場合のコールバック
onPrimaryAction
optional
() => void-プライマリーアクションボタンが実行された場合のコールバック
header
optional
string-ヘッダーに表示する見出しテキスト
primaryActionLabel
optional
string-プライマリーアクションボタンのラベル
primaryActionColor
optional
"primary" | "alert"-プライマリーアクションボタンのカラースキーム
closeLabelstring閉じる閉じるボタンのラベル
overlayOpacity"normal" | "darker"normalオーバーレイの透過度
fixedHeightbooleanfalse画面を占有する高さで固定するかどうか
showClosebooleantrue閉じるボタンを表示するかどうか
openbooleantrueモーダルダイアログを開くかどうか
isStaticbooleanfalseopenを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
id
optional
string-ネイティブ要素のid属性。ページで固有のIDを指定
ariaLabelledby
optional
string-ネイティブのaria-labelledby属性。独自の見出しを実装する場合にダイアログとの紐づけに使用。ページで固有のIDを指定
hero
optional
ReactNode-ヒーローエリア(見出しの更に上)に配置するコンテンツ
onSecondaryAction
optional
() => void-セカンダリーアクションが実行された場合のコールバック
secondaryActionLabel
optional
string-セカンダリーアクションボタンのラベル
data-*
optional
string-Custom data attributes

Feature#

  • ユーザーの作業を中断し、強制的にダイアログを表示します
  • 確実に操作させたい/コンテンツを見せたい場合に有効です
  • 画面上下を専有してモーダルを表示したい場合は、<ActionHalfModal>を利用してください

Usage#

  • 極力1つのモーダルにつき、アクションは1つにとどめましょう
  • 2つのアクションを含めることもできますが、アンチパターンです

モーダルダイアログは必要?#

一般に、モーダルダイアログは次のような用途で使用されます。

  • ページの内容とは別のコンテンツを表示・操作する必要がある場合
  • 作業の確認(編集・削除・送信など)を促す場合
  • 重要なメッセージや警告を表示する場合

まず、モーダルダイアログが本当に必要かを検討してください。ページとしてUIを表現することが基本です。
Webの重要な要素として「URLが発行されLinkableであること」が挙げられます。しかし、モーダルダイアログは基本的にURLが発行されません。

  • ブラウザの戻るボタンに対応しない
  • 例えば管理画面ではURLをマニュアルに記載したいケースがある

など、URLがないことのデメリットが存在します。

モーダルダイアログは「モーダル」の名前の通り、ある特定のモードにユーザーを閉じ込めます。強制的にユーザーの作業が中断されるため、乱用は避ける必要があります。

また、複雑な操作や大量のコンテンツを扱うことには向いていません(デフォルトで領域が狭いため)。そういったケースではページとして分割することを検討してください。

基本的にモーダルダイアログはアンチパターンです。

Header Text#

冗長な表記は避け、なるべく簡潔で具体的に書いてください。ヘッダーテキストでそのモーダルダイアログの目的を理解できる内容としましょう。 モバイル環境では2行、それより大きなデバイスでは1行に収まるようにします。

ユーザーが求める操作を、体現止めまたは疑問系で表現します。アクションを表す動名詞とその対象は連体助詞「の」を使って接続します。

  • ❌「ユーザー情報を編集しましょう」
  • ⭕️「ユーザー情報の編集」

データの削除、内容の破棄など破壊的なアクションの場合は疑問形を使用します。例:「この回答履歴を削除しますか?」

汎用的な言葉ではなく、ユースケースに特化した具体的な言葉を使いましょう。

  • ❌「変更をキャンセルする」
  • ⭕️「変更を破棄する」

Button Label#

簡潔で、具体的なテキストをラベルとして用いてください。

  • ❌「OK」

  • ⭕️「保存」

  • ❌「キャンセル」

  • ⭕️「停止」

また、「キャンセル」と「閉じる」は使い分けてください。前者はアクションを中断するニュアンスがあり、後者は単にダイアログを閉じる場合に使います。

header and aria-labelledby#

  • header propに渡されたテキストは、aria-labelledby属性を通してダイアログ自体を説明するラベルとなります。
    • 特にスクリーンリーダーユーザーにとって意味のあるものとなります
  • headerpropを使わない場合、モーダルのariaLabelledby prop と見出しとして扱う要素のid属性に共通の文字列を指定し紐づけを行ってください
    • custom headerのExampleを参考にしてください