7onicDESIGN SYSTEM

Button

ボタンは、ユーザーがアクションを実行するための最も基本的なインタラクティブ要素です。クリック、タップで操作を開始し、フォーム送信やナビゲーションなど様々な用途に使用します。

4
Variants
4
Colors
5
Sizes
Pure
React

Playground

プレビュー
solidD
Variant
Color
Size
Radius
Icon
Weight
Width
State
Label
<Button>Button</Button>

Variants

Style

Solid
ソリッド背景。最も視覚的に目立つスタイル。
送信、保存、購入
Outline
中立的なアクション。背景と調和させたい場合。
詳細を見る、編集
Ghost
最小限の視覚的存在感。ツールバーなどに最適。
ツールバー、ナビ
Link
テキストリンクスタイル。インラインアクションに。
もっと見る、詳細

Solid Colors

Default
ダークカラー。最も汎用的なCTA。
送信、保存
Primary
ブランドカラー。ブランドを強調するアクション。
サインアップ
Secondary
補助的なアクション。プライマリと並べて使用。
キャンセル、戻る
Destructive
破壊的なアクション。削除や取消不能な操作に。
削除、リセット

Sizes

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

With Icons

<Button variant="outline" leftIcon={<Search />}>検索</Button>
<Button variant="outline" rightIcon={<ChevronRight />}>続ける</Button>
<Button variant="outline" leftIcon={<Search />} rightIcon={<ChevronRight />}>
  検索する
</Button>

States

Solid Primary
Outline
// Solid Primary States
<Button color="primary">Default</Button>
<Button color="primary" loading>Loading</Button>
<Button color="primary" disabled>Disabled</Button>

// Outline States
<Button variant="outline">Default</Button>
<Button variant="outline" loading>Loading</Button>
<Button variant="outline" disabled>Disabled</Button>

API

Props

variant"solid"
"solid" | "outline" | "ghost" | "link"

ボタンのスタイル。solid=600、outline/ghost/link=400のフォント太さ

color"default"
"default" | "primary" | "secondary" | "destructive"

solidバリアントの色（default=ダーク、primary=ブランド、secondary=セカンダリ、destructive=エラー）。solid以外では無視

size"default"
"xs" | "sm" | "md" | "default" | "lg" | "icon"

ボタンの高さとパディング

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

角丸のサイズ (6px)

fullWidthfalse
boolean

幅100%で表示

loadingfalse
boolean

ローディング状態

disabledfalse
boolean

無効状態

leftIconundefined
ReactNode

左側アイコン

rightIconundefined
ReactNode

右側アイコン

fontWeightundefined
"normal" | "semibold"

フォント太さの上書き。未指定時はvariantデフォルト（solid系=600, outline/ghost/link=400）。直接prop > ButtonGroupコンテキスト > variantデフォルトの優先順位

selectedfalse
boolean

選択状態（outline/ghostのみ対応）。outlineはbg-background-muted、ghostはfont-semibold。他のvariantでは効果なし

pressEffectundefined
boolean

プレスエフェクト（active:scale-pressed）。未指定時はtrueとして動作。falseで無効化

asChildfalse
boolean

Slotとしてレンダリング

Anatomy

1
2
3
Button
1
Container
外枠 · border-radius · 背景色
2
Icon
左右に配置可能 · オプション
3
Label
テキストラベル · 必須
4
Gap
要素間の余白

Best Practices

✓

推奨

  • ✓1ページに1つのプライマリボタン
  • ✓アクション指向のラベル（「送信」「保存」）
  • ✓非同期操作にはローディング状態を表示
  • ✓十分なタッチ領域を確保（WCAG 2.5.8: 24px以上）
✕

避けるべき

  • ✗複数のプライマリボタンを並べない
  • ✗「ここをクリック」のような曖昧なラベル
  • ✗理由なくボタンを無効化しない
  • ✗安全な操作に destructive を使わない

Accessibility

キーボード操作

Tabフォーカス移動
Enterボタン実行
Spaceボタン実行

WCAG 2.2 準拠

  • コントラスト比 4.5:1 以上
  • フォーカスインジケーター
  • native disabled 属性
  • aria-busy (loading時に自動付与)
  • aria-hidden (アイコンに自動付与)
  • aria-pressed (selected時に自動付与)