ActionDialog

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

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

使用上の注意

ダイアログを乱用しない

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

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

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

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

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

レイアウト

基準サイズ

ダイアログの横幅の基準値は幅のセマンティックトークンを参照してください。
SmartHR UIでは、サイズ（sizeprops）で指定できます。

表示位置

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

アクセシビリティ

キーボード操作

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

デザインパターン

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

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

Props

ActionDialog props

title必須

string number false true ReactElement<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レベルを設定してください

subActionArea

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

responseStatus

ResponseStatusWithoutProcessing { status: "processing"; }

contentBgColor

"GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20" "WHITE" "BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"

contentPadding

0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -0.25 -0.5 -0.75 -1 -1.25 -1.5 -2 -2.5 -3 -3.5 -4 -8 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" { block?: Gap; inline?: Gap; }

subtitle

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ダイアログサブタイトル

actionTheme

"primary" "danger" "secondary"

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

actionDisabled

false true

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

closeDisabled

false true

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

onClickClose必須

() => void

actionText必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

onClickAction必須

(closeDialog: () => void) => void

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

size

"XS" "S" "M" "L" "XL" "XXL" "FULL"

ダイアログの大きさ

width非推奨

string number

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。ダイアログの幅

firstFocusTarget

RefObject<HTMLElement>

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

ariaLabel

string

ダイアログの aria-label

ariaLabelledby

string

ダイアログの aria-labelledby

isOpen必須

false true

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

onClickOverlay

() => void

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

onPressEscape

() => void

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

portalParent

HTMLElement RefObject<HTMLElement>

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

FormDialog props

title必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ダイアログタイトル

className

string

onSubmit必須

(closeDialog: () => void, e: FormEvent<HTMLFormElement>) => void

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

decorators

DecoratorsType<"closeButtonLabel">

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

titleTag非推奨

"h1" "h2" "h3" "h4" "h5" "h6"

subActionArea

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

responseStatus

ResponseStatusWithoutProcessing { status: "processing"; }

contentBgColor

"GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20" "WHITE" "BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"

contentPadding

0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -0.25 -0.5 -0.75 -1 -1.25 -1.5 -2 -2.5 -3 -3.5 -4 -8 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" { block?: Gap; inline?: Gap; }

subtitle

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ダイアログサブタイトル

actionTheme

"primary" "danger" "secondary"

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

actionDisabled

false true

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

closeDisabled

false true

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

onClickClose必須

() => void

actionText必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

size

"XS" "S" "M" "L" "XL" "XXL" "FULL"

ダイアログの大きさ

width非推奨

string number

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。ダイアログの幅

firstFocusTarget

RefObject<HTMLElement>

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

ariaLabel

string

ダイアログの aria-label

ariaLabelledby

string

ダイアログの aria-labelledby

isOpen必須

false true

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

onClickOverlay

() => void

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

onPressEscape

() => void

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

portalParent

HTMLElement RefObject<HTMLElement>

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

プロダクト

ページ内目次

ActionDialog