Button row

by firegroove

HTML

<sp-body>
<div style="height:130px;width:10% ;overflow:scroll">
  <sp-action-group>
    <button id="button-1">
      <span slot="icon" class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
          <path d="M16.364,1.636a3,3,0,0,0-4.2425,0L8.8935,4.864,1.636,12.1215A3,3,0,0,0,5.8785,16.364L8.85,13.3905l7.514-7.512A3,3,0,0,0,16.364,1.636ZM9.5,5.5a1,1,0,1,1-1,1A1,1,0,0,1,9.5,5.5Zm-3,5a1,1,0,1,1,1-1A1,1,0,0,1,6.5,10.5Zm2,2a1,1,0,1,1,1-1A1,1,0,0,1,8.5,12.5Zm3-3a1,1,0,1,1,1-1A1,1,0,0,1,11.5,9.5Z" />
          <path d="M9.2265,2.1715l.6545-.756A5.96156,5.96156,0,0,0,7.2245.091l-.21.9775A4.99,4.99,0,0,1,9.2265,2.1715ZM5.3555.9925,5.236,0A6.0632,6.0632,0,0,0,2.473,1.072l.577.816A4.99406,4.99406,0,0,1,5.3555.9925ZM.993,5.373a4.995,4.995,0,0,1,.8855-2.308l-.815-.5795A5.979,5.979,0,0,0,0,5.257ZM2.1875,9.239a4.98947,4.98947,0,0,1-1.112-2.208L.1,7.245a5.96646,5.96646,0,0,0,1.3355,2.65Z" />
        </svg>
      </span>
      <span class="label">Text 1</span>
    </button>
    <button id="button-2">
      <span slot="icon" class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 18 18" width="18">
          <path class="ico-lum-a" d="M16,9a6.97651,6.97651,0,0,0-2.057-4.95L9,9Z" />
          <path class="ico-lum-b" d="M9,9l4.9595,4.9345A6.978,6.978,0,0,0,16,9Z" />
          <path class="ico-lum-c" d="M9,9v7a6.97752,6.97752,0,0,0,4.937-2.0435Z" />
          <path class="ico-lum-d" d="M9,16V9L4.05,13.9445A6.98,6.98,0,0,0,9,16Z" />
          <path class="ico-lum-e" d="M9,9H2a6.97949,6.97949,0,0,0,2.05,4.9445Z" />
          <path class="ico-lum-f" d="M9,9,4.045,4.061A6.9765,6.9765,0,0,0,2,9Z" />
          <path class="ico-lum-g" d="M9,1a8,8,0,1,0,8,8A8,8,0,0,0,9,1ZM9,16A6.9955,6.9955,0,0,1,4.035,4.072L8.9695,9V2H9A7,7,0,0,1,9,16Z" />
        </svg>
      </span>
      <span class="label">Button text 2</span>
    </button>
    <button id="button-3">
      <span slot="icon" class="icon">
        <svg...

CSS

body {
    padding: 12px;
}

/* Icons */
.icon {
    height: 18px;
    width: 18px;
}

.icon svg {
    fill: currentColor;
    height: 18px;
    width: 18px;
}

path.ico-lum-a,
path.ico-lum-b,
path.ico-lum-c,
path.ico-lum-d,
path.ico-lum-e,
path.ico-lum-f {
    isolation: isolate;
}

path.ico-lum-a {opacity: 0.2;}
path.ico-lum-b {opacity: 0.33;}
path.ico-lum-c {opacity: 0.47;}
path.ico-lum-d {opacity: 0.6;}
path.ico-lum-e {opacity: 0.7;}
path.ico-lum-f {opacity: 0.8;}

/* Buttons layout */
sp-action-group {
    background: red;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* gap: .25em; */
				margin:0 0.25em;

    align-items: center;
    justify-content: space-evenly;
    min-width: 0px;
}

button {
    display: flex;
    flex-direction: row;
    justify-content: start;
    /* gap: 0.25em; */
    flex-basis: 0;
    flex-grow: 1;
		margin:0 0.25em;

    min-width: 30px;
    max-width: max-content;
    white-space: nowrap;
}

button .label {
    font-size: 1em;
    font-weight: inherit;
    flex-shrink: 1;   
    overflow: hidden;
    text-overflow: ellipsis;
}