アイコンボタン
正方形のセカンダリスタイルのアイコンボタン。中は36px(アイコン20px)、小は32px(アイコン16px)で、角丸はどちらも10pxです。行ごとの操作、ヘッダーの通知ベル、ツールバーに使います。
インストール
CLI または手動でこのアイコンボタンコンポーネントを追加できます。
ダークモード対応:この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
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 />