Holo Button Group

The <holo-button-group> component groups related buttons together with role="group" semantics and a shared visual gap. Use the orientation prop to lay buttons out horizontally or vertically, and the label prop to give the group an accessible name.

When to use

Use it for:

• Grouping related buttons that act on the same thing, such as a toolbar of formatting actions.
• Laying out buttons horizontally or vertically with shared spacing.

Don’t use it for:

• Switching between views. Use Tabs.
• Choosing one value from a set. Use Radio or Select.
• Laying out arbitrary content. Use Stack.

Live Previews

Horizontal (default)

<holo-button-group label="Text formatting">
  <holo-button label="Bold" variant="secondary"></holo-button>
  <holo-button label="Italic" variant="secondary"></holo-button>
  <holo-button label="Underline" variant="secondary"></holo-button>
</holo-button-group>

Vertical

<holo-button-group label="Actions" orientation="vertical">
  <holo-button label="Save" variant="primary"></holo-button>
  <holo-button label="Cancel" variant="secondary"></holo-button>
</holo-button-group>

Accessibility

The host has role="group", and aria-label is set from the label prop when provided. It adds no behaviour of its own: each slotted button is a normal tab stop, so keyboard use is exactly that of the buttons inside. See Button.

Key	Action
Tab	Moves between buttons in the group, one stop each
Enter, Space	Activates the focused button

• There is no roving tabindex and no arrow-key navigation.

You provide:

• A label that names the group (“Text formatting”). Without it the group has no accessible name.
• An accessible name for every button inside, including Icon Buttons.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-button-group';

Properties

Property	Attribute	Type	Default	Description
label	label	string	—	Optional accessible name for the group, exposed via aria-label.
orientation	orientation	"horizontal" | "vertical"	'horizontal'	The layout direction of the grouped buttons.

Slots

Slot	Description
(default)	The holo-button/holo-icon-button elements to group.

CSS custom properties

Property	Description
--holo-button-group-gap	Space between grouped buttons.