Button

主な操作・もう一つの操作・取り消せない操作に使うボタンです。押せない状態と読み込み中の見本も入っています。

見本

<button type="button" class="btn btn-pri btn-md">Primary</button>
<button type="button" class="btn btn-sec btn-md">Secondary</button>
<button type="button" class="btn btn-ghost btn-md">Ghost</button>
<button type="button" class="btn btn-accent btn-md">Accent</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
<button type="button" class="btn btn-pri btn-md" disabled>Disabled</button>
<button type="button" class="btn btn-pri btn-md" disabled aria-busy="true"><span class="spin" aria-hidden="true"></span>Saving…</button>
<button type="button" class="btn btn-sec btn-sm">Small</button>
<button type="button" class="btn btn-pri btn-lg">Large</button>

.btn{--k-btn-gap:var(--k-space-2);--k-btn-weight:500;--k-btn-press:.5px;--k-btn-height-sm:32px;--k-btn-height-md:38px;--k-btn-height-lg:44px;--k-btn-pad-lg:var(--k-space-5);--k-btn-text-lg:var(--k-text-md);--k-btn-disabled-opacity:.45;--k-btn-shadow:var(--k-shadow-xs);--k-btn-inset:var(--k-ring-inset);--k-btn-spinner-size:14px;--k-btn-spinner-border:2px;--k-btn-spinner-track:color-mix(in srgb,currentColor 35%,transparent);--k-btn-spin-duration:700ms;--k-btn-spin-turn:360deg;display:inline-flex;align-items:center;justify-content:center;gap:var(--k-btn-gap);font-weight:var(--k-btn-weight);border-radius:var(--k-radius);cursor:pointer;border:1px solid transparent;font-family:var(--k-font);transition:background-color var(--k-dur-1) var(--k-ease),color var(--k-dur-1) var(--k-ease),box-shadow var(--k-dur-1) var(--k-ease);white-space:nowrap;text-decoration:none;background:none;color:var(--k-ink)}
.btn:hover:not(:disabled){background:var(--k-bg-soft)}
.btn:active:not(:disabled){transform:translateY(var(--k-btn-press));background:var(--k-seg)}
.btn-pri{background:var(--k-ink);color:var(--k-bg)}
.btn-pri:hover:not(:disabled){background:var(--k-ink-2)}
.btn-pri:active:not(:disabled){background:var(--k-ink)}
.btn-sec{background:var(--k-bg);color:var(--k-ink);border-color:var(--k-line);box-shadow:var(--k-btn-shadow)}
.btn-sec:hover:not(:disabled){background:var(--k-bg-soft)}
.btn-sec:active:not(:disabled){background:var(--k-seg)}
.btn-ghost{background:transparent;color:var(--k-ink-2)}
.btn-ghost:hover:not(:disabled){background:var(--k-bg-soft);color:var(--k-ink)}
.btn-ghost:active:not(:disabled){background:var(--k-seg);color:var(--k-ink)}
.btn-danger{background:var(--k-danger);color:var(--k-on-color)}
.btn-danger:hover:not(:disabled){background:var(--k-danger-bg);color:var(--k-danger-ink)}
.btn-danger:active:not(:disabled){background:var(--k-danger);color:var(--k-on-color);box-shadow:var(--k-btn-inset)}
/* Deprecated: .btn-asagi is retained as an alias for .btn-accent. */
.btn-accent,.btn-asagi{background:var(--k-accent);color:var(--k-on-accent)}
.btn-accent:hover:not(:disabled),.btn-asagi:hover:not(:disabled){background:var(--k-accent-hover);color:var(--k-on-accent)}
.btn-accent:active:not(:disabled),.btn-asagi:active:not(:disabled){background:var(--k-accent);box-shadow:var(--k-btn-inset);color:var(--k-on-accent)}
.btn-sm{height:var(--k-btn-height-sm);padding:0 var(--k-space-3);font-size:var(--k-text-sm);border-radius:var(--k-radius-sm)}
.btn-md{height:var(--k-btn-height-md);padding:0 var(--k-space-4);font-size:var(--k-text-base)}
.btn-lg{height:var(--k-btn-height-lg);padding:0 var(--k-btn-pad-lg);font-size:var(--k-btn-text-lg)}
.btn:focus-visible{outline:none;box-shadow:var(--k-ring)}
.btn:disabled{opacity:var(--k-btn-disabled-opacity);cursor:not-allowed;transform:none}
.btn[aria-busy="true"]{cursor:progress}
.btn .spin{width:var(--k-btn-spinner-size);height:var(--k-btn-spinner-size);flex-shrink:0;border-radius:var(--k-radius-full);border:var(--k-btn-spinner-border) solid var(--k-btn-spinner-track);border-top-color:currentColor;animation:k-rot calc(var(--k-btn-spin-duration) * var(--k-mscale, 1)) linear infinite}
@keyframes k-rot{to{transform:rotate(var(--k-btn-spin-turn))}}
@media(prefers-reduced-motion:reduce){.btn{transition:none}.btn .spin{animation:none}}

導入

npx @kajisho5/kataui add button

手動で入れる場合：

tokens.css をページで一度だけ読み込む
CSS タブの中身を、自分のスタイルシートに貼る
HTML タブの中身を、使いたい場所に貼る。

使いどころ

1つの画面で、主な操作（Primary）は1つだけにします。もう一つの選択肢には Secondary、3番目以降の操作には Ghost を使います。Danger は、削除のような取り消せない操作にだけ使います。

アクセシビリティ

ブラウザ標準の <button> を使い、type を必ず書きます。JavaScript は使いません。キーボードで選ぶと --k-ring の枠が出ます（2px のすき間と 2px の枠。ライト・ダークとも背景との差 3:1 を測って確認済み）。Primary・Secondary・Ghost・Accent・Danger のそれぞれに、マウスを乗せたとき・押したとき・押せないときの見た目があります。押せる状態の文字は、どの状態でも両方のテーマで 5.5:1 以上です（docs/review/button）。押せない状態はブラウザ標準の disabled 属性を使います。読み込み中の見本は文字を残したまま disabled と aria-busy を付け、回る印は aria-hidden で読み上げから外し、動きを減らす設定（prefers-reduced-motion）では止まります。btn-asagi は btn-accent の古い別名で、今後は使いません。2026-11-06 にオーナーが iPhone の VoiceOver で確認しました（記録の書き起こしはありません。docs/review/button/screen-reader.md）。NVDA では確かめていません。ボタンは文字を入力しないので、日本語入力（IME）は関係ありません。確認したのは Chromium だけで、Safari と Firefox はまだです。

キー	動き
`Tab`	次のボタンへ移動
`Shift + Tab`	前のボタンへ戻る
`Enter / Space`	押す

英語版にだけある情報

静的チェックの結果・部品の構造（Anatomy）・読むトークン・使い方の例・関連する部品

英語版の Button ページで見る →

この訳は、英語版の 2026-11-07 の内容をもとにしています。英語版の文が変わると、テストで知らせます。