ボタンButtonExperimental
ボタン、またはボタン風の見た目のコンポーネントを表示します。
プレビュー
状態とバリエーション
ボタンは見た目の種類と実用状態の両方を持ちます。まず種類ごとの意味を 1 行ずつ確認し、その後に読み込み中、無効化、アイコンのみなどの状態を確認します。
default既定の強い操作。互換性のため前景色ベースの黒いボタンとして維持します。
primaryブランドカラーを使う主要 CTA。保存、公開、続行など画面の主操作に使います。
info詳細確認や補足情報へ誘導する操作。成功や警告ではない中立的な通知操作に使います。
success完了、承認、接続済みなど、肯定的な結果を明示する操作に使います。
warning注意が必要な継続操作や、破壊的ではない確認操作に使います。
secondary主要操作ほど強くない補助的な操作。並列の選択肢や軽い導線に使います。
outlineフォームのキャンセルやダイアログ起動など、境界を持たせたい中立操作に使います。
ghostツールバーやリスト行など、背景に溶け込ませたい操作に使います。
link通常のボタンよりリンクとして読ませたい遷移や補足操作に使います。
destructive削除や取り消せない処理など、注意を促す必要がある操作に使います。
実用状態
状態は見た目の種類だけでは表現できない、実装時のふるまいを確認するために並べます。
サイズ展開
テキストボタンは xs / sm / default / lg / xl を使い分け、アイコンのみの操作は size="icon" と aria-label を組み合わせます。
処理中
保存中などの処理が進んでいる間は、進捗アイコンと文言を表示し、ボタン操作を無効化します。
破壊的アクション + アイコン
削除など取り戻せない操作では、破壊的な見た目とアイコンで意図を強調します。
ツールチップと組み合わせ
アイコンのみのボタンには必ずホバー時の説明を。
無効化
条件を満たさない時は操作できない状態にし、ホバーやフォーカスで理由を伝えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| variant | "default" | "destructive" | "ghost" | "info" | "link" | "outline" | "primary" | "secondary" | "success" | "warning" | "default" | ボタンの視覚的な種類を指定します。 |
| size | "xs" | "sm" | "default" | "lg" | "xl" | "icon" | "default" | ボタンのサイズを指定します。 |
| asChild | boolean | false | 直下の子要素へ、ボタンの見た目と操作属性を合成します。 |
使い方
Loading...