ボタングループ

component

同じ対象に対する関連した操作のボタンを横につなげ、1 つのまとまった部品に見せます。隣り合うボタンの境界線は 1 本に重なり、角丸はグループの両端だけに残ります。中身は ボタン と アイコンボタン の outline をそのまま使い、CSS だけで動きます。

基本

関連した操作を 2〜4 個つなげる。グループの中は同じ variant（outline）・theme・サイズで揃え、role="group" と aria-label で何に対する操作かを名前にする

<div class="btn-group" role="group" aria-label="テキストの編集">
  <button type="button" class="btn btn-md btn-neutral btn-outline">コピー</button>
  <button type="button" class="btn btn-md btn-neutral btn-outline">切り取り</button>
  <button type="button" class="btn btn-md btn-neutral btn-outline">貼り付け</button>
</div>

アイコンボタン

アイコンだけのボタンは icon-btn（outline）をつなげ、それぞれに操作名の aria-label を付ける

<div class="btn-group" role="group" aria-label="表示の拡大・縮小">
  <button type="button" class="icon-btn icon-btn-md icon-btn-neutral icon-btn-outline" aria-label="縮小">
    <svg class="icon icon-lg" aria-hidden="true"><use href="./icons.svg#lucide-minus"></use></svg>
  </button>
  …
</div>

サイズ

中のボタンのサイズ（btn-{sm,md,lg}）がそのままグループの高さになる。1 つのグループの中でサイズを混ぜない

sm
md
lg

分割ボタン

主操作の btn の右に icon-btn（chevron-down）をつなげ、アクションメニュー（.action-menu-end）でその他の操作を開く。icon-btn の aria-label に主操作の名前を含める

<div class="btn-group" role="group" aria-label="下書きの保存">
  <button type="button" class="btn btn-md btn-neutral btn-outline">下書き保存</button>
  <button type="button" class="icon-btn icon-btn-md icon-btn-neutral icon-btn-outline" id="split-trigger"
          aria-label="下書き保存のその他の操作" aria-haspopup="menu" aria-expanded="false" popovertarget="split-menu">
    <svg class="icon icon-lg" aria-hidden="true"><use href="./icons.svg#lucide-chevron-down"></use></svg>
  </button>
</div>
<div class="action-menu action-menu-end" id="split-menu" popover role="menu" aria-labelledby="split-trigger">
  <button type="button" class="menu-item" role="menuitem" tabindex="-1">テンプレートとして保存</button>
  …
</div>

状態

今は実行できない操作は、その 1 つだけ disabled にする（グループごと無効にしない）。フォーカス中のボタンは前面に出て、フォーカスリングが隣に隠れない（右は is-focus-preview の見本）

disabled（貼り付けるものが無い）

focus

機能

このコンポーネントの用途

同じ対象に対する関連した操作（コピー / 切り取り / 貼り付け、拡大 / 縮小 等）を 1 つのまとまりとして並べる。
選択状態を持つボタンの並び（表示形式の一覧 / グリッド、書式の太字 / 斜体）は toggle-btn-group、
表示する中身（パネル）の切替は tab、フォームの選択肢は radio、絞り込みのトグルは filter-chip、
操作が多くて並べきれないなら action-menu に畳む。主操作と副操作を並べるだけ（保存＋キャンセル等）なら
グループにせず btn を間隔を空けて並べる。