ツールピルToolPill
Experimental

編集ツールやモード切り替えを、ツールチップ付きのアイコンピルとして表示します。

状態とバリエーション

横並びでは、隣のアイコンに重ならないようツールチップを上に出します。

縦並びでは tooltipSide を right または left にして、上下のツールを隠さないようにします。

通常操作、主要操作、削除などの危険操作で variant を切り替えます。

現在のモードや選択中ツールは isActive で固定表示します。

周辺 UI の密度に合わせてアイコンボタンの大きさを変えます。

表は横にスクロールできます

プロパティ	型	初期値	説明
icon	ComponentType	-	表示するアイコンコンポーネントです。
label	string	-	支援技術に伝える名前とツールチップに表示する文言です。
isActive	boolean	false	現在選択されているツールとして表示します。
variant	"danger" \| "primary" \| "secondary"	"primary"	通常操作、主要操作、危険操作の見た目です。
size	"sm" \| "md" \| "lg"	"md"	アイコンボタンの大きさです。
tooltipSide	"top" \| "right" \| "bottom" \| "left"	"top"	ツールチップを出す方向です。横並びでは上または下、縦並びでは右または左を指定します。
onClick	MouseEventHandler<HTMLButtonElement>	-	クリック時に呼び出されます。
className	string	-	必要に応じて外側に追加するクラスです。