MessageDialog

ユーザーに情報を提示するためのダイアログです。

モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム(幕)で隠され、操作を受け付けません。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

モーダルなUIの使いどころもあわせて参照してください。

ダイアログを乱用しない

MessageDialogの表示中、ユーザーの操作範囲は強制的に制限されます。

ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。

複数のモーダルダイアログを同時に表示しない

モーダルダイアログ(ActionDialogやMessageDialog)を1つの操作で複数個表示したり、モーダルダイアログ上の操作によって2つ目のモーダルダイアログを表示したりすることは、原則として推奨されません。3つの画面が重なり、画面どうしの関係性や、どんな操作をすれば何が起こるのかが予測しづらくなるためです。

なお、モーダルダイアログ上の操作によってModelessDialogを表示したり、ModelessDialogが開いている状態でモーダルダイアログを開いたりすることは問題ありません。

フィードバックとして使わない

MessageDialogは、表示したままダイアログ外の操作ができず、以下の理由で処理結果のフィードバックには不適切なため、原則としてフィードバックとしては使いません。

  • 処理が成功した場合、ユーザーは次の操作をする前にダイアログを閉じる一手間が発生する
  • 処理が失敗した場合、表示されたエラーメッセージを参照しながら操作できない

フィードバックにはNotificationBarResponseMessageなどを使います。詳しくは、フィードバックを参照してください。

レイアウト

基準サイズ

ダイアログの横幅サイズの基準値は以下のとおりです。
サイズに意図がない場合は、下記の値から想定に近い値を選択してください。

デスクトップ、タブレット(TABLET

サイズ補足説明
XS480px(30rem)幅の最小値として使います。
S560px(35rem)
M640px(40rem)
L880px(55rem)
XL1120px(70rem)
MAXcalc(100vw - 16px)幅の最大値として使います。

スマートフォン(SP

スマートフォンは表示領域が狭いため、サイズの最大値/最小値は同じとします。

サイズ補足説明
標準calc(100vw - 16px)幅の最大値/最小値として使います。

表示位置

表示位置は、画面の天地左右中央に表示されます。

アクセシビリティ

キーボード操作

ESCキーを押すことでダイアログを閉じることができます。

構成

MessageDialogは以下の要素で構成されます。

  1. タイトル
  2. 本文
  3. アクションボタン

MessageDialogの構成

1. タイトル

このダイアログで表示する情報を簡潔に表現するタイトルをつけます。

なお、サブタイトルは基本的に使いません。

2. 本文

ユーザーに提示したい情報を表示します。

通常、FormControlなどの入力要素が含まれることはありません。入力要素を含めたい場合はActionDialogを使用してください。

3. アクションボタン

ダイアログを閉じるボタンを配置し、ラベルは閉じるとします。

Props

title必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログタイトル

description必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログの説明

className
string
decorators
DecoratorsType<"closeButtonLabel">

コンポーネント内の文言を変更するための関数を設定

titleTag非推奨
"h1""h2""h3""h4""h5""h6"

ダイアログヘッダーの HTML タグ
@deprecated SectioningContent(Article, Aside, Nav, Section)でDialog全体をラップして、ダイアログタイトルのHeadingレベルを設定してください

contentBgColor
"GREY_5""GREY_6""GREY_7""GREY_9""GREY_20""WHITE""BACKGROUND""COLUMN""BASE_GREY""OVER_BACKGROUND""HEAD""BORDER""ACTION_BACKGROUND"
onClickClose必須
() => void
contentPadding
00.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"XXS""XS""S""M""L""XL""XXL""X3S""X3L"{ block?: Gap; inline?: Gap; }
subtitle
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログサブタイトル

width
stringnumber

ダイアログの幅

firstFocusTarget
RefObject<HTMLElement>

ダイアログを開いた時にフォーカスする対象

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

ダイアログを開いているかどうか

onPressEscape
() => void

エスケープキーを押下した時に発火するコールバック関数

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数

portalParent
HTMLElementRefObject<HTMLElement>

DOM 上でダイアログの要素を追加する親要素