Button group

hc-button-group connects adjacent hc-button elements into one segmented cluster — split buttons, icon-button rows, pagination-like groups. It is purely presentational: it collapses the shared inner border-radii, overlaps neighbours by 1px so the touching borders read as a single hairline, and rounds only the outer corners. No selected state, no JavaScript.

Note

For a two-state segmented control (one option active at a time), use hc-toggle-group — it carries the selection semantics. hc-button-group is just visual grouping of independent buttons.

Basic HTML

Preview Code

BoldItalicUnderline

<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>

Each child is a normal .hc-button, so variants, sizes, and data-hx-* attributes all work unchanged. Set the group’s size by setting data-size on each button.

Icon buttons

A common use is a compact row of icon actions. Give every icon-only button an accessible name with aria-label.

Preview Code

⬅↔➡

<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>

Split button

Pair a primary action with a caret that opens a menu. Keep the two buttons as the group’s only children and place the popover menu outside the group, referenced by id.

Preview Code

Save▾

Save and closeSave as draftSave a copy

<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>

Vertical

data-orientation="vertical" stacks the buttons and collapses the top/bottom shared borders instead.

Preview Code

DayWeekMonth

<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>

Accessibility

• Wrap the cluster in role="group" with an aria-label (or aria-labelledby) describing what the buttons have in common. This is optional but helps assistive tech announce the relationship.
• Each button is an independent control with its own accessible name — icon-only buttons must carry aria-label.
• This is not a selection widget. There is no aria-pressed / aria-checked state here; if you need “one of these is active”, reach for hc-toggle-group.
• Keyboard behaviour is the native button default (Tab to each, Enter / Space to activate) — the group adds no roving tabindex.

CSS variables

Show the generated CSS variables

hc-button-group introduces no tokens of its own; it reuses the button’s corner radius for the outer corners.

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

Related

• Button — the grouped element.
• Toggle group — the selectable (one-active) segmented control.
• Menu — the dropdown for the split-button caret.
• Pagination — a purpose-built connected page cluster.