Button radio

Button radios are radio button for actions, also showing selection status.

Checkbox

.e-buttonradio

<input class="e-buttonradio" type="checkbox" value="1" name="buttoncheckbox" id="buttoncheckbox-1">
<label class="e-btn" for="buttoncheckbox-1">
  Button 1
</label>
<input class="e-buttonradio" type="checkbox" value="1" name="buttoncheckbox" id="buttoncheckbox-1"><label class="e-btn" for="buttoncheckbox-1">Button 1</label>

Usage

Radio (button group).e-buttongroup > .e-buttonradio

<div class="e-buttongroup e-buttongroup-sticky">
  <input class="e-buttonradio" type="radio" value="1" name="buttonradio" id="buttonradio-1">
  <label class="e-btn" for="buttonradio-1">
    Button 1
  </label>
  <input class="e-buttonradio" type="radio" value="2" name="buttonradio" id="buttonradio-2">
  <label class="e-btn" for="buttonradio-2">
    Button 2
  </label>
  <input class="e-buttonradio" type="radio" value="3" name="buttonradio" id="buttonradio-3">
  <label class="e-btn" for="buttonradio-3">
    Button 3
  </label>
</div>
<div class="e-buttongroup e-buttongroup-sticky"><input class="e-buttonradio" type="radio" value="1" name="buttonradio" id="buttonradio-1"><label class="e-btn" for="buttonradio-1">Button 1</label><input class="e-buttonradio" type="radio" value="2" name="buttonradio" id="buttonradio-2"><label class="e-btn" for="buttonradio-2">Button 2</label><input class="e-buttonradio" type="radio" value="3" name="buttonradio" id="buttonradio-3"><label class="e-btn" for="buttonradio-3">Button 3</label></div>

Related components

ButtonButton groupCheckboxRadio