PackagesUIComponentsButtons
ActionButton
アクション実行用のボタンコンポーネント。variantでスタイルを切り替える。
いつ使うか
- フォーム送信、データ保存、キャンセル、削除など、画面内のアクション実行に使用する
- ダイアログの確定アクション（「保存」「送信」「作成」）に使用する
variantで視覚的な重要度を使い分ける
いつ使わないか
- ページ遷移やナビゲーションには使わない。
ActionLinkButtonを使用する - インラインのテキストリンクには使わない。テキストリンクコンポーネントを使用する
Usage
import { ActionButton } from '@bi-shop-it/ui/action-button';
<ActionButton label="送信" />
<ActionButton label="キャンセル" variant="secondary" />
<ActionButton label="削除" variant="destructive" />Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | — | ボタンに表示するテキスト |
variant | 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline' | 'primary' | ボタンのスタイル |
icon | IconName | — | ラベルに併せて表示するアイコン名 |
iconPosition | 'start' | 'end' | 'start' | アイコンの表示位置 |
isLoading | boolean | false | ローディング状態。Spinnerを表示し、操作を無効化する |
disabled | boolean | false | ボタンを無効化する |
size | 'sm' | 'md' | 'lg' | 'md' | ボタンのサイズ |
type | 'button' | 'submit' | 'reset' | 'button' | HTMLのbutton type属性 |
onClick | () => void | — | クリック時のコールバック |
variant の使い分け
| variant | 用途 | 例 |
|---|---|---|
primary | 画面内で最も重要なアクション。1画面に1つが原則 | 送信、保存、作成 |
secondary | 副次的なアクション。primary と並べて使う | キャンセル、戻る |
destructive | 破壊的操作。取り消しが困難なアクション | 削除、解除 |
ghost | 控えめなアクション。ツールバーやテーブル行内 | 編集、コピー |
outline | 枠線のみのアクション。secondary より控えめ | フィルター、オプション |
状態
Variants
<ActionButton label="送信" variant="primary" />
<ActionButton label="キャンセル" variant="secondary" />
<ActionButton label="削除" variant="destructive" />
<ActionButton label="編集" variant="ghost" />
<ActionButton label="フィルター" variant="outline" />With Icon
icon にアイコン名を文字列で指定する。iconPosition でアイコンの位置を変更できる。
<ActionButton icon="Mail" label="メール送信" />
<ActionButton icon="ChevronRight" iconPosition="end" label="次へ" />Loading
isLoading が true のとき、アイコンがSpinnerに置き換わり、ボタンが無効化される。
<ActionButton isLoading label="送信中..." />Disabled
<ActionButton disabled label="送信" />Size
<ActionButton label="小" size="sm" />
<ActionButton label="中" size="md" />
<ActionButton label="大" size="lg" />アクセシビリティ
コンポーネントが内部で処理すること
isLoading時にdisabled属性を自動付与し、操作を防止する- 装飾アイコンに
aria-hidden="true"を自動付与し、スクリーンリーダーから隠す - ローディング中は
Spinnerがrole="status"でスクリーンリーダーに状態を通知する typeのデフォルトを'button'に設定し、フォーム内での意図しない送信を防止する
利用者が対応すること
- ボタンのラベルは操作内容が明確に伝わるテキストにすること（「送信」「保存」等。「クリック」は避ける）
- フォーム送信に使う場合は
type="submit"を明示すること
関連コンポーネント
ActionLinkButton— ページ遷移を伴うアクションに使用する。見た目はActionButtonと同じだが、リンクとして動作する