KARAKURIDESIGN SYSTEM

ButtonGroup

ButtonGroupは、関連するボタンを視覚的にグループ化するコンテナコンポーネントです。 ツールバー、フィルター、アクショングループなど、複数の選択肢を1つのユニットとして提示する場合に使用します。

使用ガイド: ButtonGroupにvariant、size を指定すると、 子Button・IconButtonに自動継承されます。個別にオーバーライドも可能です。

2
Variants
5
Sizes
2
Orientations
Pure
React

Playground

Preview
outlineD
Variant
Size
Radius
Icon
Weight
Direction
Attached
Count
State
<ButtonGroup variant="outline">
  <Button>Copy</Button>
  <Button>Cut</Button>
  <Button>Paste</Button>
</ButtonGroup>

Variants

Outline
中立的なアクション。背景と調和させたい場合に使用。
ツールバー、フィルター
Ghost
最小限の視覚的存在感。コンパクトなUIやナビゲーションに最適。
ナビ、ツールバー

Sizes

ButtonGroupはButtonのサイズをContextで継承します。以下はButtonと同じサイズ規則です。

xs
高さ28px
横パディング10px
Gap4px
アイコン14px
フォント12px
sm
高さ32px
横パディング12px
Gap8px
アイコン14px
フォント13px
md
高さ36px
横パディング14px
Gap8px
アイコン16px
フォント14px
default
高さ40px
横パディング16px
Gap8px
アイコン16px
フォント14px
lg
高さ48px
横パディング24px
Gap8px
アイコン16px
フォント16px

タッチターゲット: WCAG 2.5.8基準では最小24pxのタッチ領域が必要です。 最小のxs（28px）でもWCAG基準を満たしています。

Features

Variant Combinations

編集アクション
元に戻す/やり直し
ズームコントロール

Orientation

Horizontal (デフォルト)
ボタンを水平方向に並べます。ツールバーやアクショングループに最適。
ツールバー、ナビ
Vertical
ボタンを垂直方向に並べます。サイドバーやドロップダウンメニューに最適。
サイドバー、メニュー

API

Props

variantundefined
"outline" | "ghost"

子Buttonのバリアント（Contextで継承）

sizeundefined
"xs" | "sm" | "md" | "default" | "lg"

子Buttonのサイズ（Contextで継承）

radiusundefined
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

子Buttonの角丸（Contextで継承）

fontWeightundefined
"normal" | "semibold"

子Buttonのフォント太さ（Contextで継承）

disabledundefined
boolean

全ボタンを無効化（Contextで継承）

orientation"horizontal"
"horizontal" | "vertical"

ボタンの配置方向

attachedtrue
boolean

ボタン同士を結合して表示するかどうか

Customization

すべてのボタンはデザインシステムのスペーシングルールに基づいたデフォルト値を使用します。 グループのclassNameで全ボタンを一括カスタマイズできます。

横パディングの変更

className="[&>button]:px-10"

ボタン幅の均等化

className="inline-grid grid-flow-col auto-cols-fr"

Tip：デフォルト値はコンポーネントの一貫性を保つよう設計されています。UI実装上カスタマイズが必要な場合にご活用ください。

ButtonGroup vs ToggleGroup

似たような見た目ですが、用途と動作が異なります。適切なコンポーネントを選択してください。

用途

ButtonGroup: アクションボタンのグループ化

ToggleGroup: オン/オフ状態の管理

状態管理

ButtonGroup: 手動 (selected prop)

ToggleGroup: 自動 (Radix管理)

選択モード

ButtonGroup: 手動制御のみ

ToggleGroup: single / multiple

value管理

ButtonGroup: なし

ToggleGroup: value / onValueChange

ユースケース

ButtonGroup: ツールバー、アクショングループ

ToggleGroup: テキスト配置、フォーマット

選択の目安: 選択状態を自動で管理したい場合は ToggleGroup を使用してください。 クリック時に特定のアクション（API呼び出し等）を実行する場合は ButtonGroup が適切です。