material-button-group

MD3 Expressive button group — standard (gap container) + connected (2dp gap, fused inner corners). Five sizes; single / multi select with toggle icon buttons.

standard
standard sizes
connected
connected sizes
connected square
single-select 
comfortable
multi-select 
italic, underline
Sample usage 
<!-- standard: invisible container, gap by size, mixes buttons + icon buttons -->
<material-button-group>
  <material-icon-button variant="filled" icon="skip_previous" aria-label="Previous"></material-icon-button>
  <material-button variant="tonal" label="Play" icon="play_arrow"></material-button>
  <material-icon-button variant="filled" icon="skip_next" aria-label="Next"></material-icon-button>
</material-button-group>

<!-- connected: 2dp gap, inner corners fused -->
<material-button-group variant="connected">
  <material-button variant="tonal" label="Day"></material-button>
  <material-button variant="tonal" label="Week"></material-button>
  <material-button variant="tonal" label="Month"></material-button>
</material-button-group>

<!-- single-select with required (one stays selected) -->
<material-button-group variant="connected" selection-mode="single" required>
  <material-icon-button toggle variant="tonal" value="compact"     icon="density_small"  aria-label="Compact"></material-icon-button>
  <material-icon-button toggle variant="tonal" value="comfortable" icon="density_medium" aria-label="Comfortable" selected></material-icon-button>
  <material-icon-button toggle variant="tonal" value="spacious"    icon="density_large"  aria-label="Spacious"></material-icon-button>
</material-button-group>

<!-- listen for selection -->
<script>
  document.querySelector('material-button-group')
    .addEventListener('materialSelectionChange', e => console.log(e.detail.values));
</script>