Button Group
Related buttons joined in one row: text styles, alignment, actions on one thing. The buttons are ordinary Buttons in a named group. Specification: docs/components/button-group.md
Basics
Buttons that belong together, joined in one piece: role="group" on the .canon-button-group, named by aria-label (or aria-labelledby). Each button is an ordinary Button and does its own thing; Tab moves through them one by one.
Size
data-size on the group or a container: 32 / 40 / 48 tall, the buttons' sizes.
Icon only
data-display="icon" on the group hides every label: square buttons, as in a toolbar. The labels stay as the buttons' names, and a Tooltip can show them.
Toggles
Buttons that switch something on and off carry aria-pressed; a pressed one is held down, and canon.js flips it on click, like a checkbox. Any number can be on (bold, underline), or one at a time with data-select="one" on the group (the alignment: pressing one releases the others). An app that keeps the state itself, as a text editor does from the selection, cancels the click (preventDefault()) and sets it. A choice that is a form value is a Segmented Control instead.
States
Hover, pressed and focus are each button's own: the focus ring shows over the neighbours. disabled on a button greys it out; disable every button to disable the group.
Actions
A group of actions on one thing. data-intent colors a button's label and icon; in a group every emphasis looks the same.
Edge cases
Right to left: the group runs from the right, and directional icons mirror.