Button Group

Demo

Features

• 関連ボタンを角丸・境界線で連結してひとつのグループに見せる shadcn/ui Button Group 相当（参照軸 #2001）。root（div）/ separator（div）/ text（div）の 3 anatomy パーツを持つ（button_group.rs モジュール doc）。
• role="group" の静的なグループ化であり、mod@toolbar の roving tabindex 状態機械とは異なりネイティブ Tab 順序に委ねる（mod@fieldset と同じく状態機械を持たない）。
• role="group" へ aria-orientation は付与しない（WAI-ARIA 上 group ロールへの aria-orientation は非許可、toolbar::toggle_group と同じ判断）。向きは data-orientation のみで表現する。
• 先頭/末尾ボタンの角丸連結は本モジュールの責務外（.claude/rules/coding-rust.md §3.25、装飾は pre-styled-ui 側）。CSS の :first-child/:last-child セレクタで表現する。
• separator はグループ自身の向きと直交する aria-orientation/data-orientation を出力する（横並びグループの区切り線は縦線になるため vertical、toolbar::separator/action_bar::separator と同じ判断）。
• ネスト（グループの中にグループ）を許容する。内側の root は自身の data-orientation のみを持ち、外側の値へは影響しない。

API Reference

Arguments

Data Attributes

Examples

Vertical 単体構成

root を Vertical 向きで単体使用する最小構成です。

ネスト（グループの中にグループ）

外側 Vertical・内側 Horizontal のグループを組み合わせた構成です。

自前 CSS の最小例

data-scope / data-part / data-orientation 属性セレクタで先頭/末尾ボタンの角丸連結・区切り線を組み立てる最小例です。headless-ui 自体はスタイルを持ちません。

[data-scope="button-group"][data-part="root"] {
  display: inline-flex;
}
[data-scope="button-group"][data-part="root"][data-orientation="vertical"] {
  flex-direction: column;
}
[data-scope="button-group"][data-part="root"] > button:not(:first-child) {
  margin-inline-start: -1px;
}
[data-scope="button-group"][data-part="root"] > button:first-child {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
[data-scope="button-group"][data-part="root"] > button:last-child {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}
[data-scope="button-group"][data-part="separator"] {
  width: 1px;
  background: #d1d5db;
}

Accessibility

Keyboard Interactions

WAI-ARIA