Button Groups combine two or more buttons into a unified interface control element.
Use when only one button should be selected at a time. This is akin to a radio-button interaction.
<div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--16223" role="button" aria-pressed="false">
<input id="luci-button--16223" type="radio" class="luci-button__input" name="basic-toggle">
<span class="luci-button__inner">
<span class="luci-button__text"> Left </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--61411" role="button" aria-pressed="false">
<input id="luci-button--61411" type="radio" class="luci-button__input" name="basic-toggle">
<span class="luci-button__inner">
<span class="luci-button__text"> Middle </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--35639" role="button" aria-pressed="false">
<input id="luci-button--35639" type="radio" class="luci-button__input" name="basic-toggle">
<span class="luci-button__inner">
<span class="luci-button__text"> Right </span>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--62462" role="button" aria-pressed="false">
<input id="luci-button--62462" type="radio" class="luci-button__input" name="basic-toggle-checked">
<span class="luci-button__inner">
<span class="luci-button__text"> Left </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--13297" role="button" aria-pressed="true">
<input id="luci-button--13297" type="radio" class="luci-button__input" name="basic-toggle-checked" checked>
<span class="luci-button__inner">
<span class="luci-button__text"> Middle </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--89353" role="button" aria-pressed="false">
<input id="luci-button--89353" type="radio" class="luci-button__input" name="basic-toggle-checked">
<span class="luci-button__inner">
<span class="luci-button__text"> Right </span>
</span>
</label>
</div>Icons can precede labels to provide additional context about the button purpose.
<div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--22148" role="button" aria-pressed="false">
<input id="luci-button--22148" type="radio" class="luci-button__input" name="icon-toggle-with-text">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
<span class="luci-button__text"> Delete </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--50826" role="button" aria-pressed="false">
<input id="luci-button--50826" type="radio" class="luci-button__input" name="icon-toggle-with-text">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
<span class="luci-button__text"> Download </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--34928" role="button" aria-pressed="false">
<input id="luci-button--34928" type="radio" class="luci-button__input" name="icon-toggle-with-text">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
<span class="luci-button__text"> Help </span>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--83883" role="button" aria-pressed="false">
<input id="luci-button--83883" type="radio" class="luci-button__input" name="icon-toggle-with-text-checked">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
<span class="luci-button__text"> Delete </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--85590" role="button" aria-pressed="true">
<input id="luci-button--85590" type="radio" class="luci-button__input" name="icon-toggle-with-text-checked" checked>
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
<span class="luci-button__text"> Download </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--89539" role="button" aria-pressed="false">
<input id="luci-button--89539" type="radio" class="luci-button__input" name="icon-toggle-with-text-checked">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
<span class="luci-button__text"> Help </span>
</span>
</label>
</div>Use the icon only button group only when space is limited and the icon can be clearly understood.
<div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--62515" role="button" aria-pressed="false">
<input id="luci-button--62515" type="radio" class="luci-button__input" name="icon-toggle">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--55118" role="button" aria-pressed="false">
<input id="luci-button--55118" type="radio" class="luci-button__input" name="icon-toggle">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--46483" role="button" aria-pressed="false">
<input id="luci-button--46483" type="radio" class="luci-button__input" name="icon-toggle">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--11500" role="button" aria-pressed="false">
<input id="luci-button--11500" type="radio" class="luci-button__input" name="icon-toggle-checked">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--43462" role="button" aria-pressed="true">
<input id="luci-button--43462" type="radio" class="luci-button__input" name="icon-toggle-checked" checked>
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--65627" role="button" aria-pressed="false">
<input id="luci-button--65627" type="radio" class="luci-button__input" name="icon-toggle-checked">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
</span>
</label>
</div>Use when multiple buttons can be selected at a time. This is akin to a checkbox interaction.
<div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--94470" role="button" aria-pressed="false">
<input id="luci-button--94470" type="checkbox" class="luci-button__input" name="basic-multi-select">
<span class="luci-button__inner">
<span class="luci-button__text"> Left </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--26984" role="button" aria-pressed="false">
<input id="luci-button--26984" type="checkbox" class="luci-button__input" name="basic-multi-select">
<span class="luci-button__inner">
<span class="luci-button__text"> Middle </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--43915" role="button" aria-pressed="false">
<input id="luci-button--43915" type="checkbox" class="luci-button__input" name="basic-multi-select">
<span class="luci-button__inner">
<span class="luci-button__text"> Right </span>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--89693" role="button" aria-pressed="true">
<input id="luci-button--89693" type="checkbox" class="luci-button__input" name="basic-multi-select-checked" checked>
<span class="luci-button__inner">
<span class="luci-button__text"> Left </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--67363" role="button" aria-pressed="false">
<input id="luci-button--67363" type="checkbox" class="luci-button__input" name="basic-multi-select-checked">
<span class="luci-button__inner">
<span class="luci-button__text"> Middle </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--67603" role="button" aria-pressed="true">
<input id="luci-button--67603" type="checkbox" class="luci-button__input" name="basic-multi-select-checked" checked>
<span class="luci-button__inner">
<span class="luci-button__text"> Right </span>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--38215" role="button" aria-pressed="false">
<input id="luci-button--38215" type="checkbox" class="luci-button__input" name="icon-multi-select-with-text">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
<span class="luci-button__text"> Delete </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--69603" role="button" aria-pressed="false">
<input id="luci-button--69603" type="checkbox" class="luci-button__input" name="icon-multi-select-with-text">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
<span class="luci-button__text"> Download </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--54770" role="button" aria-pressed="false">
<input id="luci-button--54770" type="checkbox" class="luci-button__input" name="icon-multi-select-with-text">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
<span class="luci-button__text"> Help </span>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--15693" role="button" aria-pressed="true">
<input id="luci-button--15693" type="checkbox" class="luci-button__input" name="icon-multi-select-with-text-checked" checked>
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
<span class="luci-button__text"> Delete </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--79126" role="button" aria-pressed="false">
<input id="luci-button--79126" type="checkbox" class="luci-button__input" name="icon-multi-select-with-text-checked">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
<span class="luci-button__text"> Download </span>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--69639" role="button" aria-pressed="true">
<input id="luci-button--69639" type="checkbox" class="luci-button__input" name="icon-multi-select-with-text-checked" checked>
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
<span class="luci-button__text"> Help </span>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--97943" role="button" aria-pressed="false">
<input id="luci-button--97943" type="checkbox" class="luci-button__input" name="icon-multi-select">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--48172" role="button" aria-pressed="false">
<input id="luci-button--48172" type="checkbox" class="luci-button__input" name="icon-multi-select">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--78846" role="button" aria-pressed="false">
<input id="luci-button--78846" type="checkbox" class="luci-button__input" name="icon-multi-select">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
</span>
</label>
</div><div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--47242" role="button" aria-pressed="true">
<input id="luci-button--47242" type="checkbox" class="luci-button__input" name="icon-multi-select-checked" checked>
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#delete"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--43539" role="button" aria-pressed="false">
<input id="luci-button--43539" type="checkbox" class="luci-button__input" name="icon-multi-select-checked">
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#download"> </use>
</svg>
</span>
</label>
<label class="luci-button luci-button--secondary luci-button--small luci-button--input luci-button--with-icons" for="luci-button--90800" role="button" aria-pressed="true">
<input id="luci-button--90800" type="checkbox" class="luci-button__input" name="icon-multi-select-checked" checked>
<span class="luci-button__inner">
<svg class="luci-icon luci-button__icon luci-button__icon--left" aria-hidden="true">
<use xlink:href="/icons/luci.svg#help"> </use>
</svg>
</span>
</label>
</div>role="button" attribute when using <input type="radio"> or <input type="checkbox"> buttons.aria-pressed="true" when the button is :checked and aria-pressed="false" when it is not :checked.