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--37311" role="button" aria-pressed="false">
<input id="luci-button--37311" 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--94693" role="button" aria-pressed="false">
<input id="luci-button--94693" 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--99668" role="button" aria-pressed="false">
<input id="luci-button--99668" 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--58085" role="button" aria-pressed="false">
<input id="luci-button--58085" 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--84823" role="button" aria-pressed="true">
<input id="luci-button--84823" 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--13216" role="button" aria-pressed="false">
<input id="luci-button--13216" 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--59284" role="button" aria-pressed="false">
<input id="luci-button--59284" 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--32260" role="button" aria-pressed="false">
<input id="luci-button--32260" 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--33570" role="button" aria-pressed="false">
<input id="luci-button--33570" 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--22500" role="button" aria-pressed="false">
<input id="luci-button--22500" 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--39385" role="button" aria-pressed="true">
<input id="luci-button--39385" 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--83252" role="button" aria-pressed="false">
<input id="luci-button--83252" 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--92648" role="button" aria-pressed="false">
<input id="luci-button--92648" 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--61130" role="button" aria-pressed="false">
<input id="luci-button--61130" 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--53280" role="button" aria-pressed="false">
<input id="luci-button--53280" 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--83830" role="button" aria-pressed="false">
<input id="luci-button--83830" 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--16366" role="button" aria-pressed="true">
<input id="luci-button--16366" 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--66182" role="button" aria-pressed="false">
<input id="luci-button--66182" 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--15599" role="button" aria-pressed="false">
<input id="luci-button--15599" 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--66320" role="button" aria-pressed="false">
<input id="luci-button--66320" 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--90403" role="button" aria-pressed="false">
<input id="luci-button--90403" 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--99585" role="button" aria-pressed="true">
<input id="luci-button--99585" 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--35330" role="button" aria-pressed="false">
<input id="luci-button--35330" 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--81759" role="button" aria-pressed="true">
<input id="luci-button--81759" 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--11205" role="button" aria-pressed="false">
<input id="luci-button--11205" 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--86875" role="button" aria-pressed="false">
<input id="luci-button--86875" 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--16106" role="button" aria-pressed="false">
<input id="luci-button--16106" 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--19582" role="button" aria-pressed="true">
<input id="luci-button--19582" 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--78590" role="button" aria-pressed="false">
<input id="luci-button--78590" 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--93209" role="button" aria-pressed="true">
<input id="luci-button--93209" 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--73605" role="button" aria-pressed="false">
<input id="luci-button--73605" 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--83599" role="button" aria-pressed="false">
<input id="luci-button--83599" 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--92682" role="button" aria-pressed="false">
<input id="luci-button--92682" 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--64305" role="button" aria-pressed="true">
<input id="luci-button--64305" 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--19647" role="button" aria-pressed="false">
<input id="luci-button--19647" 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--86940" role="button" aria-pressed="true">
<input id="luci-button--86940" 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.