KARAKURIDESIGN SYSTEM

IconButton

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

6
Variants
5
Sizes
1:1
Aspect Ratio
Pure
React

Playground

Preview
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

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

ローディングStates

disabledfalse
boolean

無効States

pressEffectundefined
boolean

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

asChildfalse
boolean

Slotとしてレンダリング

aria-labelundefined
string

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