アイコンボタン

component

アイコンだけの小さなボタンです。編集・削除・閉じるなど、限られたスペースでの操作に使います。

Variant × Theme size = medium / state = enable

  solid outline ghost
primary
neutral
negative

size

primary / solid · icon は常に 24×24

small 32×32 · p4
medium 40×40 · p8
large 48×48 · p12

state

primary / solid / medium

enable bg: primary/700
hover bg: primary/800
focus ＋ outline info/600
disabled

プロパティ

prop values description
thema primary · neutral · negative アイコンボタンは secondary を持たない。3 色のみ。
size sm · md · lg 32 / 40 / 48 の正方形。アイコンは常に 24×24 で固定。
variant solid · outline · ghost subtle は持たない。3 つだけ。
state enable · :hover · :focus-visible · :disabled loading は持たない。
aria-label 必須 アイコンだけの操作なので、スクリーンリーダー用に aria-label を必ず付与する。

機能

このコンポーネントの用途

アイコンのみで操作を表すボタン。省スペースな操作に使う。
文言ラベルを見せたい主操作は icon-button ではなく button。