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--3938" role="button" aria-pressed="false">
<input id="luci-button--3938" 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--23258" role="button" aria-pressed="false">
<input id="luci-button--23258" 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--75723" role="button" aria-pressed="false">
<input id="luci-button--75723" 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--63176" role="button" aria-pressed="false">
<input id="luci-button--63176" 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--39666" role="button" aria-pressed="true">
<input id="luci-button--39666" 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--9960" role="button" aria-pressed="false">
<input id="luci-button--9960" 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--61760" role="button" aria-pressed="false">
<input id="luci-button--61760" 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--90846" role="button" aria-pressed="false">
<input id="luci-button--90846" 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--47538" role="button" aria-pressed="false">
<input id="luci-button--47538" 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--9906" role="button" aria-pressed="false">
<input id="luci-button--9906" 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--24731" role="button" aria-pressed="true">
<input id="luci-button--24731" 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--58734" role="button" aria-pressed="false">
<input id="luci-button--58734" 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--89992" role="button" aria-pressed="false">
<input id="luci-button--89992" 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--32243" role="button" aria-pressed="false">
<input id="luci-button--32243" 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--44848" role="button" aria-pressed="false">
<input id="luci-button--44848" 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--47575" role="button" aria-pressed="false">
<input id="luci-button--47575" 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--92096" role="button" aria-pressed="true">
<input id="luci-button--92096" 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--90809" role="button" aria-pressed="false">
<input id="luci-button--90809" 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--7995" role="button" aria-pressed="false">
<input id="luci-button--7995" 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--78921" role="button" aria-pressed="false">
<input id="luci-button--78921" 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--29976" role="button" aria-pressed="false">
<input id="luci-button--29976" 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--90530" role="button" aria-pressed="true">
<input id="luci-button--90530" 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--75873" role="button" aria-pressed="false">
<input id="luci-button--75873" 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--79202" role="button" aria-pressed="true">
<input id="luci-button--79202" 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--31530" role="button" aria-pressed="false">
<input id="luci-button--31530" 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--26100" role="button" aria-pressed="false">
<input id="luci-button--26100" 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--49262" role="button" aria-pressed="false">
<input id="luci-button--49262" 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--40604" role="button" aria-pressed="true">
<input id="luci-button--40604" 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--24074" role="button" aria-pressed="false">
<input id="luci-button--24074" 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--16202" role="button" aria-pressed="true">
<input id="luci-button--16202" 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--68621" role="button" aria-pressed="false">
<input id="luci-button--68621" 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--18771" role="button" aria-pressed="false">
<input id="luci-button--18771" 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--8369" role="button" aria-pressed="false">
<input id="luci-button--8369" 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--49990" role="button" aria-pressed="true">
<input id="luci-button--49990" 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--72518" role="button" aria-pressed="false">
<input id="luci-button--72518" 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--25371" role="button" aria-pressed="true">
<input id="luci-button--25371" 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.