Button group

The custom element is <hui-button-group>.

Overview

A layout-only wrapper that arranges slotted buttons in a row or a column with one shared rounded outline. It owns no value and is not form-associated.

Example

Button group

Source

<hui-button-group>
  <hui-button>One</hui-button>
  <hui-button>Two</hui-button>
  <hui-button>Three</hui-button>
</hui-button-group>

The Go template that renders it:

<hui-button-group>
  {{ range .Actions }}
    <hui-button>{{ .Label }}</hui-button>
  {{ end }}
</hui-button-group>

On a phone

A joined group is one control, so it does not wrap. Wider than its container it scrolls sideways inside its rounded border, and focusing a button scrolls it into view. A toolbar with more actions than fit reads better with the rarer ones behind a hui-dropdown-menu.

A toolbar wider than the phone 375 px wide

Source

<hui-button-group>
  <hui-button variant="outline">Archive</hui-button>
  <hui-button variant="outline">Report</hui-button>
  <hui-button variant="outline">Snooze</hui-button>
  <hui-button variant="outline">Mark as read</hui-button>
  <hui-button variant="outline">Move to folder</hui-button>
</hui-button-group>

API

Attributes1

Attributes
Name	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	The stacking direction. Reflected and read by the host stylesheet.

Properties1

Properties
Name	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	Reflects to the `orientation` attribute.

Slots1

Slots
Name	Description
`(default)`	The buttons to arrange. Each slotted child except the first gets a divider on the leading edge.

CSS custom properties2

CSS custom properties
Name	Default	Description
`--hui-radius`	`0.45rem`	Base radius; the group uses `--hui-radius-lg`.
`--hui-primary-foreground`	`oklch(0.977 0.014 308.299)`	Base of the divider drawn between slotted children.

::part() hooks1

::part() hooks
Name	Description
`group`	The flex wrapper that rounds the outer corners and clips the shared edge.

States

Vertical

orientation="vertical" stacks the buttons and moves the shared borders to the horizontal edges.

Vertical

Source

<hui-button-group orientation="vertical">
  <hui-button variant="outline">One</hui-button>
  <hui-button variant="outline">Two</hui-button>
</hui-button-group>

Server-side mechanics

The server owns only orientation and the slotted buttons; the group is layout-only, is not form-associated and has no name, so it submits nothing. Each button keeps its own type, so a submit or reset button inside still drives the enclosing form, but the group itself contributes no value. An hx-swap just replaces the wrapper and its children; there is no interaction state to preserve. Validation does not apply: aria-invalid and hui-field have no meaning for the group.

Accessibility

The group is layout only: it adds no aria or role, so the buttons keep their own names and semantics.
The first slotted child keeps all four corners; the rest take one clipped outer corner, which is presentation only.
Because it is not form-associated, wrapping controls in it does not change what the enclosing form serialises.

Keyboard

Keyboard
Keys	Action
`Tab`	Walks through the slotted buttons; the group itself is never a tab stop.
`Each button key`	Enter and Space activate whichever button holds focus; the group adds no key handling.

Gotchas

None recorded.