Button Groups

Button Groups combine two or more buttons into a unified interface control element.

Toggle

Use when only one button should be selected at a time. This is akin to a radio-button interaction.

Basic example

Hover
Focus
Copied to clipboard
<div class="luci-button-group">
    <label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--41121" role="button" aria-pressed="false">
        <input id="luci-button--41121" 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--56378" role="button" aria-pressed="false">
        <input id="luci-button--56378" 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--87400" role="button" aria-pressed="false">
        <input id="luci-button--87400" type="radio" class="luci-button__input" name="basic-toggle">
        <span class="luci-button__inner">
            <span class="luci-button__text"> Right </span>
        </span>
    </label>
</div>
Checked
Copied to clipboard
<div class="luci-button-group">
    <label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--14151" role="button" aria-pressed="false">
        <input id="luci-button--14151" 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--78719" role="button" aria-pressed="true">
        <input id="luci-button--78719" 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--46919" role="button" aria-pressed="false">
        <input id="luci-button--46919" 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>

Icon and label example

Icons can precede labels to provide additional context about the button purpose.

Hover
Focus
Copied to clipboard
<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--36652" role="button" aria-pressed="false">
        <input id="luci-button--36652" 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--8134" role="button" aria-pressed="false">
        <input id="luci-button--8134" 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--4679" role="button" aria-pressed="false">
        <input id="luci-button--4679" 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>
Checked
Copied to clipboard
<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--37784" role="button" aria-pressed="false">
        <input id="luci-button--37784" 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--53180" role="button" aria-pressed="true">
        <input id="luci-button--53180" 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--39896" role="button" aria-pressed="false">
        <input id="luci-button--39896" 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>

Icon only

Use the icon only button group only when space is limited and the icon can be clearly understood.

Hover
Focus
Copied to clipboard
<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--96773" role="button" aria-pressed="false">
        <input id="luci-button--96773" 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--40867" role="button" aria-pressed="false">
        <input id="luci-button--40867" 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--40055" role="button" aria-pressed="false">
        <input id="luci-button--40055" 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>
Checked
Copied to clipboard
<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--42977" role="button" aria-pressed="false">
        <input id="luci-button--42977" 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--31260" role="button" aria-pressed="true">
        <input id="luci-button--31260" 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--17022" role="button" aria-pressed="false">
        <input id="luci-button--17022" 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>

Multiselect

Use when multiple buttons can be selected at a time. This is akin to a checkbox interaction.

Basic example

Hover
Focus
Copied to clipboard
<div class="luci-button-group">
    <label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--35631" role="button" aria-pressed="false">
        <input id="luci-button--35631" 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--35393" role="button" aria-pressed="false">
        <input id="luci-button--35393" 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--84843" role="button" aria-pressed="false">
        <input id="luci-button--84843" 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>
Checked
Copied to clipboard
<div class="luci-button-group">
    <label class="luci-button luci-button--secondary luci-button--small luci-button--input" for="luci-button--43256" role="button" aria-pressed="true">
        <input id="luci-button--43256" 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--67503" role="button" aria-pressed="false">
        <input id="luci-button--67503" 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--65379" role="button" aria-pressed="true">
        <input id="luci-button--65379" 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>

Icon and label example

Hover
Focus
Copied to clipboard
<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--20192" role="button" aria-pressed="false">
        <input id="luci-button--20192" 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--53616" role="button" aria-pressed="false">
        <input id="luci-button--53616" 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--19319" role="button" aria-pressed="false">
        <input id="luci-button--19319" 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>
Checked
Copied to clipboard
<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--54678" role="button" aria-pressed="true">
        <input id="luci-button--54678" 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--79536" role="button" aria-pressed="false">
        <input id="luci-button--79536" 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--91470" role="button" aria-pressed="true">
        <input id="luci-button--91470" 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>

Icon only

Hover
Focus
Copied to clipboard
<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--41298" role="button" aria-pressed="false">
        <input id="luci-button--41298" 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--78051" role="button" aria-pressed="false">
        <input id="luci-button--78051" 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--37820" role="button" aria-pressed="false">
        <input id="luci-button--37820" 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>
Checked
Copied to clipboard
<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--71849" role="button" aria-pressed="true">
        <input id="luci-button--71849" 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--53426" role="button" aria-pressed="false">
        <input id="luci-button--53426" 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--63585" role="button" aria-pressed="true">
        <input id="luci-button--63585" 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>

Accessibility

  • Include a role="button" attribute when using <input type="radio"> or <input type="checkbox"> buttons.
    • Add aria-pressed="true" when the button is :checked and aria-pressed="false" when it is not :checked.