7onicDESIGN SYSTEM

IconButton

IconButtonは、アイコンのみを表示する正方形のボタンです。ツールバー、ナビゲーション、コンパクトなUIで使用します。

6
Variants
5
Sizes
1:1
Aspect Ratio
Pure
React

Playground

プレビュー
solidD
Variant
Color
Size
Radius
Icon
State
<IconButton aria-label="Action">
  <Search />
</IconButton>

Variants

Style

Solid
ソリッド背景。最も視覚的に目立つスタイル。
追加、送信
Outline
中立的なアクション。背景と調和させたい場合。
情報、詳細
Ghost
最小限の視覚的存在感。ツールバーなどに最適。
ツールバー
Subtle
控えめな存在感でホバー時に強調。ヘッダーやサイドバーに。
ヘッダー、ナビ

Solid Colors

Default
ダークカラー。最も汎用的なCTA。
追加、送信
Primary
ブランドカラー。ブランドを強調するアクション。
お気に入り
Secondary
補助的なアクション。プライマリと並べて使用。
設定、編集
Destructive
破壊的なアクション。削除や取消不能な操作に。
削除、閉じる

Sizes

xs
サイズ28px
アイコン14px
sm
サイズ32px
アイコン16px
md
サイズ36px
アイコン16px
default
サイズ40px
アイコン20px
lg
サイズ48px
アイコン24px

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

States

Solid Primary
Outline
Subtle
// Solid primary states
<IconButton color="primary" aria-label="Default"><Pencil /></IconButton>
<IconButton color="primary" loading aria-label="Loading"><Pencil /></IconButton>
<IconButton color="primary" disabled aria-label="Disabled"><Pencil /></IconButton>

// Outline states
<IconButton variant="outline" aria-label="Default"><Pencil /></IconButton>
<IconButton variant="outline" loading aria-label="Loading"><Pencil /></IconButton>
<IconButton variant="outline" disabled aria-label="Disabled"><Pencil /></IconButton>

// Subtle states
<IconButton variant="subtle" aria-label="Default"><Pencil /></IconButton>
<IconButton variant="subtle" loading aria-label="Loading"><Pencil /></IconButton>
<IconButton variant="subtle" disabled aria-label="Disabled"><Pencil /></IconButton>

API

Props

variant"solid"
"solid" | "outline" | "ghost" | "subtle"

ボタンのスタイル

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

solidバリアントの色。solid以外では無視

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

ボタンのサイズ (28/32/36/40/48px)

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

角丸のサイズ (6px)

loadingfalse
boolean

ローディング状態

disabledfalse
boolean

無効状態

pressEffectundefined
boolean

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

asChildfalse
boolean

Slotとしてレンダリング

aria-labelundefined
string

アクセシビリティラベル（必須）

Anatomy

1
2
Container (default)40px × 40px
Icon (default)20px (icon-md)
1
Container
正方形 (1:1) · border-radius
2
Icon
中央配置 · 必須

Best Practices

✓

推奨

  • ✓必ずaria-labelを設定する
  • ✓意味が明確なアイコンを使用
  • ✓ツールチップを併用する
  • ✓モバイルでは48px以上を使用
✕

避けるべき

  • ✗aria-labelなしで使用しない
  • ✗曖昧なアイコンを単独で使用しない
  • ✗テキストボタンの代わりに多用しない
  • ✗小さすぎるサイズを使用しない

Accessibility

キーボード操作

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

WCAG 2.2 準拠

  • コントラスト比 4.5:1 以上
  • フォーカスインジケーター
  • aria-label サポート（必須）
  • aria-busy (loading時に自動付与)