Stats
Actions
Tags
Provides ActionDialog component for confirmation and simple operation dialogs without form elements. Useful for modal confirmations in smarthr-ui React apps.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-action-dialogThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
ユーザーに確認や単純な操作を求めるためのダイアログコンポーネントです。フォーム要素を含まない確認・実行のダイアログを表示するときに使います。
ユーザーに確認や単純な操作を求めるためのダイアログコンポーネントです。フォーム要素を含まない確認・実行のダイアログを表示するときに使います。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。
import { ActionDialog } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| size | "XS" | "S" | "M" | "L" | "XL" | "XXL" | "FULL" | - | - | ダイアログの大きさ |
| width | string | number | - | - | @deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。 ダイアログの幅 |
| className | string | - | - | - |
| heading | ReactNode | ObjectHeadingType | - | ✓ | - |
| closeButton | ReactNode | { text: ReactNode; disabled?: boolean; } | - | - | - |
| subActionArea | ReactNode | - | - | ダイアログフッターの左端操作領域 |
| responseStatus | ResponseStatus | - | - | - |
| firstFocusTarget | RefObject | - | - | ダイアログを開いた時にフォーカスする対象 |
| onClickOverlay | () => void | - | - | オーバーレイをクリックした時に発火するコールバック関数 |
| onPressEscape | (() => void) & ((close: () => void) => void) | - | - | エスケープキーを押下した時に発火するコールバック関数 |
| ariaLabel | string | - | - | ダイアログの aria-label |
| ariaLabelledby | string | - | - | ダイアログの aria-labelledby |
| portalParent | HTMLElement | RefObject | - | - | DOM 上でダイアログの要素を追加する親要素 |
| contentBgColor | "BACKGROUND" | "COLUMN" | "BASE_GREY" | "OVER_BACKGROUND" | "HEAD" | ... 他8個 | - | - | - |
| contentPadding | Gap | { block?: Gap; inline?: Gap; } | - | - | - |
| actionButton | ReactNode | { text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; } | - | ✓ | - |
| onClickAction | (e: MouseEvent<Element, MouseEvent>, helpers: ActionDialogHelpers) => void | - | ✓ | アクションボタンをクリックした時に発火するコールバック関数 @param e マウスイベント @param helpers ダイアログ操作のためのヘルパー関数 |
| onClickClose | (close: () => void) => void | - | - | - |
| onToggle | (isOpen: boolean) => void | - | - | - |
| onOpen | () => void | - | - | - |
| onClose | () => void | - | - | - |
ActionDialog に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemProvides a primitive dialog component (Dialog) from the SmartHR design system for custom dialogs not covered by ActionDialog, MessageDialog, ModelessDialog, FormDialog, or StepFormDialog. Includes DialogWrapper, DialogTrigger, DialogContent, DialogCloser, and Dialog subcomponents with size, focus, accessibility, and overlay props.
Writes destructive-action confirmation dialogs with specific titles, consequence clarity, and matching button labels. Useful for delete, cancel, or irreversible actions.
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.