Skip to main contents

Button group

import '@vollowx/seele/m3/button-group/standard-button-group.js';
import '@vollowx/seele/m3/button-group/connected-button-group.js';

Stadard button group

Focus Focus 
<md-button-group>
  <md-icon-button-toggle variant="filled">
    <iconify-icon icon="material-symbols:bluetooth-disabled"></iconify-icon>
    <iconify-icon icon="material-symbols:bluetooth" slot="checked"></iconify-icon>
  </md-icon-button-toggle>

  <md-icon-button-toggle variant="filled" width="wide">
    <iconify-icon icon="material-symbols:alarm-off"></iconify-icon>
    <iconify-icon icon="material-symbols:alarm" slot="checked"></iconify-icon>
  </md-icon-button-toggle>

  <md-button-toggle>
    <iconify-icon icon="material-symbols:do-not-disturb-off-outline" slot="icon"></iconify-icon>
    <iconify-icon icon="material-symbols:do-not-disturb-on-outline" slot="icon-checked"></iconify-icon>
    <span>Focus</span>
    <span slot="checked">Focus</span>
  </md-button-toggle>

  <md-icon-button-toggle variant="filled" width="narrow">
    <iconify-icon icon="material-symbols:flashlight-off-outline"></iconify-icon>
    <iconify-icon icon="material-symbols:flashlight-on-outline" slot="checked"></iconify-icon>
  </md-icon-button-toggle>

  <md-icon-button-toggle variant="filled" checked>
    <iconify-icon icon="material-symbols:wifi-off"></iconify-icon>
    <iconify-icon icon="material-symbols:wifi" slot="checked"></iconify-icon>
  </md-icon-button-toggle>
</md-button-group>

Connected button group

James May James May Richard Hammond Richard Hammond Jeremy Clarkson Jeremy Clarkson Mr. William Mr. William 
<md-connected-button-group multiple style="width: min(100%, 600px)">
  <md-button-toggle variant="tonal" size="xs">
    James May
    <span slot="checked">James May</span>
  </md-button-toggle>
  <md-button-toggle variant="tonal" size="xs">
    Richard Hammond
    <span slot="checked">Richard Hammond</span>
  </md-button-toggle>
  <md-button-toggle variant="tonal" size="xs">
    Jeremy Clarkson
    <span slot="checked">Jeremy Clarkson</span>
  </md-button-toggle>
  <md-button-toggle variant="tonal" size="xs">
    Mr. William
    <span slot="checked">Mr. William</span>
  </md-button-toggle>
</md-connected-button-group>

Why the size attribute on button groups is not automatically applied to? It's bacause that such feature, will not be able to run at SSR time, which turns out at the client side, will show a small->desired-size layout shift. You will need to set size for all buttons inside eventually to SSR properly. Vice versa, it will not work properly synchronizing this attribute from buttons to the group element.

M3StandardButtonGroup

Properties

name description
size Reflected string; xs, s, or empty; should be the same as slotted buttons
$buttons All slotted button elements

M3ConnectedButtonGroup

Properties

name description
multiple Boolean; allow multiple buttons to be checked at the same time
$buttons All slotted toggle-button elements