ボタングループ

hc-button-group は、隣接する hc-button 要素を 1 つのセグメント化されたクラスターへ連結します — スプリットボタン、アイコンボタンの列、ページネーション風のグループなど。純粋にプレゼンテーション目的です: 共有される内側の角丸を潰し、隣同士を 1px 重ねて接する枠線が 1 本のヘアラインに見えるようにし、外側の角だけを丸めます。選択状態なし、JavaScript なし。

基本の HTML

<div class="hc-button-group" role="group" aria-label="Text style">
  <button class="hc-button" type="button">Bold</button>
  <button class="hc-button" type="button">Italic</button>
  <button class="hc-button" type="button">Underline</button>
</div>

各子要素は普通の .hc-button なので、バリアント、サイズ、data-hx-* 属性はすべてそのまま機能します。グループのサイズは各ボタンに data-size を設定して揃えます。

アイコンボタン

コンパクトなアイコンアクションの列がよくある用途です。アイコンのみのボタンには必ず aria-label でアクセシブルな名前を与えてください。

<div class="hc-button-group" role="group" aria-label="Alignment">
  <button class="hc-button" type="button" aria-label="Align left">
    <svg aria-hidden="true">…</svg>
  </button>
  <button class="hc-button" type="button" aria-label="Align center">…</button>
  <button class="hc-button" type="button" aria-label="Align right">…</button>
</div>

スプリットボタン

主アクションと、メニューを開くキャレットを組みます。グループの子はこの 2 つのボタンだけにし、 popover メニューはグループの外に置いて id で参照します。

<div class="hc-button-group">
  <button class="hc-button" data-variant="primary" type="button">Save</button>
  <button class="hc-button" data-variant="primary" type="button"
          popovertarget="save-menu" id="save-caret"
          aria-label="More save options">▾</button>
</div>

<!-- The menu lives outside the group. -->
<div class="hc-menu" id="save-menu" popover role="menu"
     aria-labelledby="save-caret">
  <button class="hc-menu__item" role="menuitem" type="button">Save and close</button>
  <button class="hc-menu__item" role="menuitem" type="button">Save as draft</button>
</div>

縦方向

data-orientation="vertical" はボタンを縦に積み、代わりに上下の共有枠線を潰します。

<div class="hc-button-group" data-orientation="vertical"
     role="group" aria-label="View">
  <button class="hc-button" type="button">Day</button>
  <button class="hc-button" type="button">Week</button>
  <button class="hc-button" type="button">Month</button>
</div>

アクセシビリティ

クラスターを role="group" で包み、ボタンたちの共通点を説明する aria-label(または aria-labelledby)を付けてください。任意ですが、支援技術が関係性を読み上げる助けになります。
各ボタンは自身のアクセシブルな名前を持つ独立したコントロールです — アイコンのみのボタンには aria-label が必須です。
これは選択ウィジェットではありません。ここに aria-pressed / aria-checked の状態はありません。「どれか 1 つがアクティブ」が必要なら hc-toggle-groupへ。
キーボード挙動はネイティブのボタンのデフォルト(Tab で各ボタンへ、 Enter / Space で起動)です — グループはロービングタブインデックスを追加しません。

テーマ用トークン

専用トークンはありません — 共有のスペーシング / カラートークンを再利用します。汎用の --hc-* 変数でテーマしてください。

CSS 変数

生成される CSS 変数を表示

hc-button-group は独自のトークンを導入しません。外側の角にはボタンの角丸を再利用します。

--hc-button-radius   (the rounded outer corners; inner corners square off)