ActionDialog

ユーザーに入力や選択などの操作を求めるためのダイアログです。ユーザーは操作内容をシステムに送信できます。

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

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

使用上の注意

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

ダイアログを乱用しない

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

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

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

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

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

レイアウト

基準サイズ

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

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

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

スマートフォン(SP

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

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

表示位置

top bottom left right propsで表示位置を指定できます。指定しない場合、画面の天地左右中央に表示されます。

  • モーダルなダイアログ(ActionDialogMessageDialog)の場合、意図的な場合を除き位置を指定せず、天地左右中央とします。

アクセシビリティ

キーボード操作

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

デザインパターン

削除操作をする際の確認のダイアログについては、削除ダイアログを参照してください。

それ以外のパターンについては、モーダルなUIを参照してください。

Props

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

ダイアログのタイトル

decorators
DecoratorsType<"closeButtonLabel">

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

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

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

responseMessage
{ status: "error" | "success"; text: ReactNode; }{ status: "processing"; }
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

ダイアログのサブタイトル

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

アクションボタンのラベル

actionTheme
"primary""secondary""danger"

アクションボタンのスタイル

actionDisabled
falsetrue

アクションボタンを無効にするかどうか

closeDisabled
falsetrue

閉じるボタンを無効にするかどうか

subActionArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログフッターの左端操作領域

onClickAction必須
(closeDialog: () => void) => void

アクションボタンをクリックした時に発火するコールバック関数
@param closeDialog - ダイアログを閉じる関数

width
stringnumber

ダイアログの幅

top
number

ダイアログを開いたときの初期 top 位置

bottom
number

ダイアログを開いたときの初期 bottom 位置

left
number

ダイアログを開いたときの初期 left 位置

right
number

ダイアログを開いたときの初期 right 位置

firstFocusTarget
RefObject<HTMLElement>

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

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

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

onPressEscape
() => void

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

onClickOverlay
() => void

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

portalParent
HTMLElementRefObject<HTMLElement>

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