Button groups combine two or more buttons into a unified interface control element.
Use the toggle button-group 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--83902" role="button" aria-pressed="false">
<input id="luci-button--83902" 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--91218" role="button" aria-pressed="false">
<input id="luci-button--91218" 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--39753" role="button" aria-pressed="false">
<input id="luci-button--39753" 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--56501" role="button" aria-pressed="false">
<input id="luci-button--56501" 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--20822" role="button" aria-pressed="true">
<input id="luci-button--20822" 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--48871" role="button" aria-pressed="false">
<input id="luci-button--48871" 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 within button groups to provide additional context about the button's function.
<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--89640" role="button" aria-pressed="false">
<input id="luci-button--89640" 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--1366" role="button" aria-pressed="false">
<input id="luci-button--1366" 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--7667" role="button" aria-pressed="false">
<input id="luci-button--7667" 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--58995" role="button" aria-pressed="false">
<input id="luci-button--58995" 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--44418" role="button" aria-pressed="true">
<input id="luci-button--44418" 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--68265" role="button" aria-pressed="false">
<input id="luci-button--68265" 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 when space is constrained and the intent of the icon is well understood.
<div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--icon-only luci-button--input" for="luci-button--49952" role="button" aria-pressed="false">
<input id="luci-button--49952" 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--icon-only luci-button--input" for="luci-button--8814" role="button" aria-pressed="false">
<input id="luci-button--8814" 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--icon-only luci-button--input" for="luci-button--92433" role="button" aria-pressed="false">
<input id="luci-button--92433" 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--icon-only luci-button--input" for="luci-button--43487" role="button" aria-pressed="false">
<input id="luci-button--43487" 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--icon-only luci-button--input" for="luci-button--5855" role="button" aria-pressed="true">
<input id="luci-button--5855" 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--icon-only luci-button--input" for="luci-button--32660" role="button" aria-pressed="false">
<input id="luci-button--32660" 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 the multi-select button group when multiple buttons can be selected at a time. This is similar to behavior when interacting with a checkbox.
<div class="luci-button-group">
<label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--21795" role="button" aria-pressed="false">
<input id="luci-button--21795" 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--91939" role="button" aria-pressed="false">
<input id="luci-button--91939" 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--15489" role="button" aria-pressed="false">
<input id="luci-button--15489" 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--41134" role="button" aria-pressed="true">
<input id="luci-button--41134" 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--57345" role="button" aria-pressed="false">
<input id="luci-button--57345" 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--25184" role="button" aria-pressed="true">
<input id="luci-button--25184" 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--56161" role="button" aria-pressed="false">
<input id="luci-button--56161" 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--3985" role="button" aria-pressed="false">
<input id="luci-button--3985" 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--88007" role="button" aria-pressed="false">
<input id="luci-button--88007" 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--32832" role="button" aria-pressed="true">
<input id="luci-button--32832" 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--47553" role="button" aria-pressed="false">
<input id="luci-button--47553" 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--29182" role="button" aria-pressed="true">
<input id="luci-button--29182" 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--icon-only luci-button--input" for="luci-button--51801" role="button" aria-pressed="false">
<input id="luci-button--51801" 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--icon-only luci-button--input" for="luci-button--75573" role="button" aria-pressed="false">
<input id="luci-button--75573" 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--icon-only luci-button--input" for="luci-button--23847" role="button" aria-pressed="false">
<input id="luci-button--23847" 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--icon-only luci-button--input" for="luci-button--71046" role="button" aria-pressed="true">
<input id="luci-button--71046" 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--icon-only luci-button--input" for="luci-button--8412" role="button" aria-pressed="false">
<input id="luci-button--8412" 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--icon-only luci-button--input" for="luci-button--54101" role="button" aria-pressed="true">
<input id="luci-button--54101" 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.