閉じるボタン
円 ✕ は、コンパクトな表面、発表、トースト、モダル、引き出しを却下するために使用されます。すべてのサイズは、リテラル(スケーリングされていない)ストロークで独自のグリフをレンダーします - 2xs、xs/sm の 2px、および md の 2.5px - そのため、重量はピクセル単位で滞在します。
2xs
xs
サインイン
md の
インストール
CLI または手動でこの閉じるボタンコンポーネントを追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLI
手動
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add close-button共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
サイズ
4つのサイズを経由して サイズ: プロップ - 16, 20, 24, 32px. 常にパス aria-label、制御は目に見えるテキストを持っていません。
<CloseButton size="2xs" aria-label="Close" /> {/* 16px, 1.6px stroke */}<CloseButton size="xs" aria-label="Close" /> {/* 20px, 2px stroke */}<CloseButton size="sm" aria-label="Close" /> {/* 24px, 2px stroke */}<CloseButton size="md" aria-label="Close" /> {/* 32px, 2.5px stroke */}モーダルヘッダ
<header className="flex items-center justify-between p-4"> <p className="text-body-medium text-text-primary">Modal title</p> <CloseButton size="md" aria-label="Close modal" onClick={onClose} /></header>