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--11649" role="button" aria-pressed="false">
<input id="luci-button--11649" 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--11698" role="button" aria-pressed="false">
<input id="luci-button--11698" 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--52949" role="button" aria-pressed="false">
<input id="luci-button--52949" 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--50837" role="button" aria-pressed="false">
<input id="luci-button--50837" 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--72271" role="button" aria-pressed="true">
<input id="luci-button--72271" 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--54515" role="button" aria-pressed="false">
<input id="luci-button--54515" 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--19602" role="button" aria-pressed="false">
<input id="luci-button--19602" 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--28479" role="button" aria-pressed="false">
<input id="luci-button--28479" 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--70912" role="button" aria-pressed="false">
<input id="luci-button--70912" 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--2513" role="button" aria-pressed="false">
<input id="luci-button--2513" 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--94685" role="button" aria-pressed="true">
<input id="luci-button--94685" 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--75996" role="button" aria-pressed="false">
<input id="luci-button--75996" 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--25854" role="button" aria-pressed="false">
<input id="luci-button--25854" 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--69090" role="button" aria-pressed="false">
<input id="luci-button--69090" 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--74431" role="button" aria-pressed="false">
<input id="luci-button--74431" 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--75577" role="button" aria-pressed="false">
<input id="luci-button--75577" 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--79985" role="button" aria-pressed="true">
<input id="luci-button--79985" 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--61042" role="button" aria-pressed="false">
<input id="luci-button--61042" 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--20315" role="button" aria-pressed="false">
<input id="luci-button--20315" 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--77737" role="button" aria-pressed="false">
<input id="luci-button--77737" 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--51779" role="button" aria-pressed="false">
<input id="luci-button--51779" 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--31838" role="button" aria-pressed="true">
<input id="luci-button--31838" 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--41994" role="button" aria-pressed="false">
<input id="luci-button--41994" 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--24284" role="button" aria-pressed="true">
<input id="luci-button--24284" 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--44070" role="button" aria-pressed="false">
<input id="luci-button--44070" 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--21053" role="button" aria-pressed="false">
<input id="luci-button--21053" 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--25069" role="button" aria-pressed="false">
<input id="luci-button--25069" 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--32896" role="button" aria-pressed="true">
<input id="luci-button--32896" 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--83100" role="button" aria-pressed="false">
<input id="luci-button--83100" 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--77476" role="button" aria-pressed="true">
<input id="luci-button--77476" 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--19970" role="button" aria-pressed="false">
<input id="luci-button--19970" 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--57556" role="button" aria-pressed="false">
<input id="luci-button--57556" 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--60940" role="button" aria-pressed="false">
<input id="luci-button--60940" 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--99854" role="button" aria-pressed="true">
<input id="luci-button--99854" 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--14441" role="button" aria-pressed="false">
<input id="luci-button--14441" 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--81911" role="button" aria-pressed="true">
<input id="luci-button--81911" 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.