ボタン

BoardUIのデザインシステムに合わせたボタンです。プライマリ、セカンダリ、ゴースト、危険な操作の4種類と、3種類のサイズを用意しています。前後のアイコン、アイコンのみの表示、ホバー・押下・無効の各状態に対応しています。

インストール

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

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

CLI

手動

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

npx boardui@latest add button

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

バリエーション

次のプロパティで4種類のスタイルを選べます： variant 。プライマリと危険な操作には縦のグラデーション、セカンダリには境界線付きの背景、ゴーストには淡い青の操作用背景を使います。

<Button variant="primary">Primary</Button>     {/* blue gradient (default) */}<Button variant="secondary">Secondary</Button> {/* white surface + hairline border */}<Button variant="ghost">Ghost</Button>         {/* blue-100 semantic surface */}<Button variant="danger">Danger</Button>       {/* red gradient */}

サイズ

中（36px、標準）、小（32px）、xs（24px）の3サイズです。アイコンのみのボタンは、どのサイズでも正方形です。

<Button size="medium">Medium</Button> {/* 36px (default) */}<Button size="small">Small</Button>   {/* 32px */}<Button size="xs">Xs</Button>         {/* 24px */}

アイコン

Remix Iconコンポーネントの参照を渡す leadingIcon / trailingIcon。次を組み合わせます： iconOnly と、 aria-label 正方形のアイコンボタンのため。

import { RiAddLine, RiArrowRightLine } from "@remixicon/react";
{/* Pass component references, not rendered elements */}<Button leadingIcon={RiAddLine}>New project</Button><Button trailingIcon={RiArrowRightLine}>Continue</Button>
{/* Icon-only requires an aria-label */}<Button iconOnly leadingIcon={RiAddLine} aria-label="Add" />

無効

標準の disabled 属性を指定すると、すべてのスタイルが淡い無効状態の背景に変わります。