Button
ユーザーがアクションを実行するための操作要素。フォーム送信・削除・ナビゲーションなど、画面内で「次に何をすべきか」を明示するときに使う。
インストール
npx shoji add button
プレビュー
Variants
Primary
Outline
Secondary
Ghost
Destructive
Link
Sizes
sm · 36px
md · 44px
lg · 56px
States
パターン
Loading
非同期処理中に spinner を表示して操作をロックする。SaaS のフォーム送信・API 呼び出しで必須のパターン。
buttonasyncUX
クリックして loading 状態を体験できます
Icon Only
ラベルなしのアイコンボタン。aria-label と Tooltip をセットで使う正方形ボタン。ツールバー・アクションカラムで頻出。
buttonicontoolbar
With Icon
テキストラベルの前後にアイコンを配置するパターン。「→」「↗」など方向を示すとき・leading icon で文脈を補完するとき。
buttoniconCTA
使い方
こんなときに使う
- フォームの送信・確定・保存など、主要なアクションを起こすとき（Primary）
- キャンセル・戻るなど、主アクションに対する補助操作（Outline）
- フィルターやソートなど、画面の状態を変える操作（Secondary）
- 削除・退会など、取り消しできない危険な操作（Destructive）
- テキストリンクとして機能させたいとき（Link）
使わないほうがいい場面
- 装飾目的のみで使う（見た目がボタンでも操作がない要素は div か span で）
- 同一スタイルのボタンを横に3つ以上並べる（どれが主アクションか判断できなくなる）
- ラベルに「OK」「はい」など動詞のない単語を使う
JP 最適化のポイント
- デフォルト高さを h-11（44px）に設定 — WCAG 2.5.5 とデジタル庁ガイドラインのタッチターゲット最小値を標準で満たす
- フォントサイズを text-base（16px）に固定 — 日本語は字形が複雑なため、14px 以下では視認性が低下しやすい
- ラベルは「動詞 + 目的語」形式を推奨（例：保存する・削除する）— 「保存」より「保存する」のほうが操作の意図が伝わりやすい