Stats
Actions
Tags
Guides usage of smarthr-ui Button, UnstyledButton, and AnchorButton components with accessibility and design system best practices for React.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-buttonThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
button要素の代替として操作や処理を実行するコンポーネントです。ユーザーに操作を促すとき、フォームを送信するとき、アクションを選択するときに使います。
button要素の代替として操作や処理を実行するコンポーネントです。ユーザーに操作を促すとき、フォームを送信するとき、アクションを選択するときに使います。
button要素の代替として操作や処理を実行するコンポーネントです。ユーザーに操作を促すとき、フォームを送信するとき、アクションを選択するときに使います。
import { UnstyledButton, Button, AnchorButton } from 'smarthr-ui'
（固有 Props なし）
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| size | "S" | "M" | M | - | ボタンの大きさ |
| disabledReason | { icon?: FunctionComponent<{}>; message: ReactNode; } | - | - | 無効な理由 |
| prefix | ReactNode | - | - | ボタン内の先頭に表示する内容。 通常は、アイコンを表示するために用いる。 |
| suffix | ReactNode | - | - | ボタン内の末尾に表示する内容。 通常は、アイコンを表示するために用いる。 |
| wide | boolean | false | - | true のとき、ボタンの width を 100% にする。 |
| variant | "text" | "primary" | "secondary" | "tertiary" | "danger" | "skeleton" | secondary | - | ボタンのスタイルの種類 |
| loading | boolean | false | - | 処理が走ってるかどうか |
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| size | "S" | "M" | M | - | ボタンの大きさ |
| prefix | ReactNode | - | - | ボタン内の先頭に表示する内容。 通常は、アイコンを表示するために用いる。 |
| suffix | ReactNode | - | - | ボタン内の末尾に表示する内容。 通常は、アイコンを表示するために用いる。 |
| loading | boolean | - | - | 処理が走ってるかどうか |
| wide | boolean | false | - | true のとき、ボタンの width を 100% にする。 |
| elementAs | ElementType | - | - | next/linkなどのカスタムコンポーネントを指定します。指定がない場合はデフォルトで a タグが使用されます。 |
| variant | "text" | "primary" | "secondary" | "danger" | "skeleton" | secondary | - | - |
| inactiveReason | { icon?: FunctionComponent<{}>; message: ReactNode; } | - | - | - |
| ref | any | - | - | - |
button要素ではなく、smarthr-ui/Button、もしくはsmarthr-ui/UnstyledButtonの利用を促すルールです
ButtonやAnchor,Link コンポーネントなどクリック可能（クリッカブル）な要素にテキストを設定することを促すルールです。
DropdownTriggerやDialogTrigger, DisclosureTrigger内にbutton要素を設置することを強制するルールです。
❌ NG:
// Triggerの子はbutton要素のみである必要がある
<DialogTrigger>
<Button />
<Any />
</DialogTrigger>
✅ OK:
<DropdownTrigger>
<Button />
</DropdownTrigger>
BulkActionRow内では「すべてのオブジェクトを選択」ボタンの実装には Button[variant="tertiary"] を使用することを推奨するルールです
✅ OK:
// 「すべてのオブジェクトの選択」ボタンにvariant="tertiary"を指定
<Table>
<thead>
<BulkActionRow>
<Cluster align="center">
<Text>このページの「オブジェクト名」50件すべて選択されています。</Text>
<Button variant="tertiary" size="S">
一覧の「オブジェクト名」1000件すべてを選択
</Button>
</Cluster>
</BulkActionRow>
</thead>
</Table>
Dialogのボタンテキストにアイコンコンポーネント（名前が"Icon"で終わるコンポーネント）を含めることを禁止するルールです。
要素の前後両方にアイコンの使用を禁止するルールです。Button や TextLink において、prefix と suffix が同時に設定されている場合、エラーとなります。
❌ NG:
<Button suffix={SUFFIX} prefix={PREFIX}>hoge</Button>
<Button suffix prefix>hoge</Button>
<StyledButton suffix={undefined} prefix={null}>hoge</StyledButton>
<Link prefix="PREFIX" suffix="SUFFIX">hoge</Link>
<StyledLink prefix="PREFIX" suffix="SUFFIX">hoge</StyledLink>
✅ OK:
<Button>hoge</Button>
<Button suffix={SUFFIX}>hoge</Button>
<Button prefix="PREFIX">hoge</Button>
<TextLink>hoge</TextLink>
<TextLink suffix="SUFFIX">hoge</TextLink>
<TextLink prefix={PREFIX}>hoge</TextLink>
<StyledButton>hoge</StyledButton>
<StyledLink>hoge</StyledLink>
<Input prefix={PREFIX} suffix={SUFFIX} />
詳細は eslint-plugin-smarthr の各ルール README を参照してください。
type="submit" を明記する小 を使うアイコン付きにする判断基準アイコン付き（左）（プレフィックス）の判断基準disabledReason props で理由を表示することを検討する通常 サイズを使用するサイズ小 のボタンを使うことは避けるサイズ小 のボタンにする必要がある場合、間隔を十分にあける
npx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemDropdownMenuButton は、同一対象に関連する複数の操作をドロップダウン表示するメニューボタンで、編集・複製・削除などのアクションをまとめるときに使います。レイアウトやデザインパターンのルールを含みます。
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.