Button

ボタンコンポーネント

GitHub でソースを見る

プレビュー

バリアント

サイズ

処理中

使いどころ

使う場面

  • 保存・送信・削除など、その場で何かを実行する操作
  • 1 つの画面で主に押してほしい操作には primary を 1 つだけ使い、ほかは secondary や outline にする
  • 取り消せない操作（削除・解約など）には destructive を使い、確認の Dialog と組み合わせる

使わない場面

  • 別のページへ移動するだけの操作。文中なら Link を使う。リンク（<a>）を使い、ボタンの見た目にしたいときは asChild で <a> を包む
  • 1 つの領域に primary を並べること。どれが主な操作かわからなくなる
  • アイコンだけのボタンを説明なしで置くこと。iconOnly のときは aria-label を必ず付け、必要なら Tooltip を添える

使い方

<Button variant="primary" size="md">ボタン</Button>
<Button loading>保存中</Button>

プロパティ

名前型デフォルト説明
variant"primary" | "secondary" | "outline" | "ghost" | "destructive""primary"ボタンのスタイルバリアント
size"xs" | "sm" | "md" | "lg""md"ボタンのサイズ
fullWidthbooleanfalse幅を100%にするかどうか
iconOnlybooleanfalseアイコンのみのボタンにするかどうか
loadingbooleanfalse処理中。先頭にスピナーを出し、クリックを受け付けない（フォーカスは外れない）
asChildbooleanなし子要素にスタイルと振る舞いを委ねる（Next.js の Link など）
disabledbooleanfalse無効状態にするかどうか

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

キーボード操作

キー動作
Tabボタンにフォーカスを移す
Enter / Spaceボタンを押す

アクセシビリティ

  • disabled のときは aria-disabled も付くので、読み上げで「使用不可」と伝わる
  • loading のときは aria-busy と aria-disabled が付き、クリックは受け付けないがフォーカスは外れない。disabled 属性は付けないので、処理中も Tab で届く
  • asChild でリンクにした場合は disabled 属性の代わりに aria-disabled を付け、クリックを止める
  • 押せない理由が利用者にわからない場合は、disabled にせず押したあとにエラーで理由を伝えるほうが親切

文言

  • 「保存する」「招待を送る」のように、押すと何が起きるかを動詞で書く。「OK」「はい」は避ける
  • Dialog のボタンは、本文の問いかけに対応する言葉にする（「削除しますか」なら「削除する」と「キャンセル」）

関連するコンポーネント