ToggleButtonGroup

ToggleButtons with one selection, as radios, or several, as a toolbar.

Aligned left.

<script>
  import { $bind, $signal } from 'brumate/signals';
  import ToggleButton from '@brumate/ui/ToggleButton.brm';
  import ToggleButtonGroup from '@brumate/ui/ToggleButtonGroup.brm';

  let align = $signal(['left']);
</script>

<ToggleButtonGroup class="ui-group" aria-label="Align" selectedKeys=$bind(align) disallowEmptySelection>
  <ToggleButton id="left" class="ui-button">Left</ToggleButton>
  <ToggleButton id="center" class="ui-button">Center</ToggleButton>
  <ToggleButton id="right" class="ui-button">Right</ToggleButton>
</ToggleButtonGroup>
<p>Aligned {align[0]}.</p>

Each ToggleButton in the group names itself with id, and selectedKeys is the list of the ones that are on. See State.
selectionMode="single", the default, makes the group a radiogroup of radios. "multiple" makes it a toolbar of toggle buttons.
disallowEmptySelection keeps one button on.
The arrow keys move focus between the buttons, as in a Toolbar.
Name it with aria-label or aria-labelledby.