PackagesUIComponentsButtons
IconButton
アイコンのみで構成されるボタンコンポーネント。ツールバーやテーブル行内など、省スペースな操作に使用する。
いつ使うか
- ツールバー、テーブル行、カードのヘッダーなど、スペースが限られた箇所での操作に使用する
- アイコンだけで操作内容が十分に伝わる場合に使用する（編集、削除、コピー、閉じる等）
- 繰り返し表示される操作で、テキストラベルが冗長になる場合に使用する
いつ使わないか
- アイコンだけでは操作内容が伝わりにくい場合は使わない。
ActionButtonでテキストラベル付きのボタンを使用する - 画面内の主要アクション（送信、保存等）には使わない。
ActionButtonのprimaryvariant を使用する - ページ遷移には使わない。
ActionLinkButtonを使用する
Usage
import { IconButton } from '@bi-shop-it/ui/icon-button';
<IconButton aria-label="編集" icon="Edit" />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
aria-label | string | — | 必須。スクリーンリーダーに読み上げられるボタンの説明 |
icon | IconName | — | 表示するアイコン名 |
variant | 'primary' | 'secondary' | 'destructive' | 'ghost' | 'outline' | 'ghost' | ボタンのスタイル |
isLoading | boolean | false | ローディング状態。Spinnerを表示し、操作を無効化する |
disabled | boolean | false | ボタンを無効化する |
size | 'sm' | 'md' | 'lg' | 'md' | ボタンのサイズ |
type | 'button' | 'submit' | 'reset' | 'button' | HTMLのbutton type属性 |
onClick | () => void | — | クリック時のコールバック |
variant の使い分け
| variant | 用途 | 例 |
|---|---|---|
ghost | 最も控えめ。テーブル行やツールバーでの標準的な操作 | 編集、コピー、メニュー |
primary | 重要な操作を強調したい場合 | 追加、確定 |
secondary | 副次的な操作 | 設定、ダウンロード |
destructive | 破壊的操作 | 削除、閉じる |
outline | 枠線で操作可能であることを示す | フィルター、ソート |
状態
Variants
<IconButton aria-label="保存" icon="Check" variant="primary" />
<IconButton aria-label="コピー" icon="Copy" variant="secondary" />
<IconButton aria-label="削除" icon="Trash2" variant="destructive" />
<IconButton aria-label="編集" icon="Edit" variant="ghost" />
<IconButton aria-label="フィルター" icon="Filter" variant="outline" />Loading
isLoading が true のとき、アイコンがSpinnerに置き換わり、ボタンが無効化される。
<IconButton aria-label="保存中" icon="Check" isLoading variant="primary" />Disabled
<IconButton aria-label="編集" disabled icon="Edit" />Size
<IconButton aria-label="設定" icon="Settings" size="sm" variant="outline" />
<IconButton aria-label="設定" icon="Settings" size="md" variant="outline" />
<IconButton aria-label="設定" icon="Settings" size="lg" variant="outline" />ActionButton との使い分け
| 基準 | IconButton | ActionButton |
|---|---|---|
| 表示内容 | アイコンのみ | テキストラベル（+ オプションでアイコン） |
| 適した場面 | ツールバー、テーブル行、省スペース | フォーム送信、主要アクション |
| デフォルト variant | ghost | primary |
aria-label | 必須 | 不要（label がアクセシブルネームになる） |
アクセシビリティ
コンポーネントが内部で処理すること
isLoading時にdisabled属性を自動付与し、操作を防止する- ローディング中は
Spinnerがrole="status"でスクリーンリーダーに状態を通知する typeのデフォルトを'button'に設定し、フォーム内での意図しない送信を防止する
利用者が対応すること
aria-labelに操作内容が明確に伝わるテキストを指定すること（「編集」「削除」等。「ボタン」「アイコン」は避ける）- テキストラベルなしでは操作内容が伝わりにくい場合は、
ActionButtonの使用を検討すること - Tooltip と組み合わせて、ホバー時に操作内容を視覚的にも伝えることを推奨する
関連コンポーネント
ActionButton— テキストラベル付きのアクションボタン。操作内容を明示したい場合に使用するActionLinkButton— ページ遷移を伴うアクションに使用する