ボタンButtonBeta
ボタン、またはボタン風の見た目のコンポーネントを表示します。
プレビュー
状態とバリエーション
ボタンは見た目の種類と実用状態の両方を持ちます。まず種類ごとの意味を 1 行ずつ確認し、その後に読み込み中、無効化、アイコンのみなどの状態を確認します。
default既定の強い操作。互換性のため前景色ベースの黒いボタンとして維持します。
primaryブランドカラーを使う主要 CTA。保存、公開、続行など画面の主操作に使います。
info詳細確認や補足情報へ誘導する操作。成功や警告ではない中立的な通知操作に使います。
success完了、承認、接続済みなど、肯定的な結果を明示する操作に使います。
warning注意が必要な継続操作や、破壊的ではない確認操作に使います。
secondary主要操作ほど強くない補助的な操作。並列の選択肢や軽い導線に使います。
outlineフォームのキャンセルやダイアログ起動など、境界を持たせたい中立操作に使います。
ghostツールバーやリスト行など、背景に溶け込ませたい操作に使います。
link通常のボタンよりリンクとして読ませたい遷移や補足操作に使います。
destructive削除や取り消せない処理など、注意を促す必要がある操作に使います。
実用状態
状態は見た目の種類だけでは表現できない、実装時のふるまいを確認するために並べます。
サイズ展開
テキストボタンは xs / sm / default / lg / xl を使い分け、アイコンのみの操作は size="icon" と aria-label を組み合わせます。モバイル/toC 画面では 44px のタップ標的（WCAG 2.5.5）を満たす size="touch"（アイコンは size="icon-touch"）を使います。
処理中
処理中は loading を渡すだけで、Spinner 表示・disabled・aria-busy がまとめて有効になります（ラベルは残り幅が安定）。
破壊的アクション + アイコン
削除など取り戻せない操作では、破壊的な見た目とアイコンで意図を強調します。
ツールチップと組み合わせ
アイコンのみのボタンには必ずホバー時の説明を。
無効化
条件を満たさない時は操作できない状態にし、ホバーやフォーカスで理由を伝えます。
プロパティ
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | "default" | "destructive" | "ghost" | "info" | "link" | "outline" | "primary" | "secondary" | "success" | "warning" | "default" | ボタンの視覚的な種類を指定します。 |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "touch" | "icon" | "icon-touch" | "default" | ボタンのサイズを指定します。touch は 44px のタップ標的（モバイル/toC 向け・WCAG 2.5.5）で、標準の余白のまま高さだけ確保します。icon-touch はそのアイコン専用版（44×44px）です。 |
| loading | boolean | false | 処理中状態。Spinner を表示し、ボタンを無効化して aria-busy を設定します（ラベルは残るため幅が安定）。asChild 時は無視されます。 |
| asChild | boolean | false | 直下の子要素へ、ボタンの見た目と操作属性を合成します。 |
使い方
import { Button } from "@gunjo/ui"
export function Example() {
return <Button variant="primary" onClick={() => console.log("click")}>保存する</Button>
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。