アイコンボタン

正方形のセカンダリスタイルのアイコンボタン。中は36px(アイコン20px)、小は32px(アイコン16px)で、角丸はどちらも10pxです。行ごとの操作、ヘッダーの通知ベル、ツールバーに使います。

インストール

CLI または手動でこのアイコンボタンコンポーネントを追加できます。

ダークモード対応:この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.

CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。

npx boardui@latest add icon-button

共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー&ペーストの例は、標準のインポートを使います。

サイズと状態

Remix Iconコンポーネントの参照を経由して渡す アイコン, 選ぶ サイズ:、そして常に提供します aria-label - 目に見えるテキストはありません。

<IconButton icon={RiEditLine} size="medium" aria-label="Edit" /> {/* 36px, 20px icon */}<IconButton icon={RiEditLine} size="small" aria-label="Edit" /> {/* 32px, 16px icon */} {/* Disabled */}<IconButton icon={RiEditLine} aria-label="Edit" disabled />