Button Groups

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

Toggle

Use the toggle button-group 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--27307" role="button" aria-pressed="false">
        <input id="luci-button--27307" 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--29740" role="button" aria-pressed="false">
        <input id="luci-button--29740" 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--33186" role="button" aria-pressed="false">
        <input id="luci-button--33186" 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--27776" role="button" aria-pressed="false">
        <input id="luci-button--27776" 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--95239" role="button" aria-pressed="true">
        <input id="luci-button--95239" 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--24224" role="button" aria-pressed="false">
        <input id="luci-button--24224" 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 within button groups to provide additional context about the button's function.

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--22751" role="button" aria-pressed="false">
        <input id="luci-button--22751" 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--79077" role="button" aria-pressed="false">
        <input id="luci-button--79077" 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--90071" role="button" aria-pressed="false">
        <input id="luci-button--90071" 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--86393" role="button" aria-pressed="false">
        <input id="luci-button--86393" 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--88111" role="button" aria-pressed="true">
        <input id="luci-button--88111" 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--85534" role="button" aria-pressed="false">
        <input id="luci-button--85534" 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 when space is constrained and the intent of the icon is well understood.

Hover
Focus
Copied to clipboard
<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--72996" role="button" aria-pressed="false">
        <input id="luci-button--72996" 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--98049" role="button" aria-pressed="false">
        <input id="luci-button--98049" 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--12798" role="button" aria-pressed="false">
        <input id="luci-button--12798" 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--icon-only luci-button--input" for="luci-button--9667" role="button" aria-pressed="false">
        <input id="luci-button--9667" 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--17351" role="button" aria-pressed="true">
        <input id="luci-button--17351" 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--23498" role="button" aria-pressed="false">
        <input id="luci-button--23498" 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>

Multi-Select

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.

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--73292" role="button" aria-pressed="false">
        <input id="luci-button--73292" 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--20021" role="button" aria-pressed="false">
        <input id="luci-button--20021" 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--18153" role="button" aria-pressed="false">
        <input id="luci-button--18153" 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--89731" role="button" aria-pressed="true">
        <input id="luci-button--89731" 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--38381" role="button" aria-pressed="false">
        <input id="luci-button--38381" 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--93773" role="button" aria-pressed="true">
        <input id="luci-button--93773" 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--34045" role="button" aria-pressed="false">
        <input id="luci-button--34045" 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--99309" role="button" aria-pressed="false">
        <input id="luci-button--99309" 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--62473" role="button" aria-pressed="false">
        <input id="luci-button--62473" 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--32960" role="button" aria-pressed="true">
        <input id="luci-button--32960" 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--10023" role="button" aria-pressed="false">
        <input id="luci-button--10023" 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--32199" role="button" aria-pressed="true">
        <input id="luci-button--32199" 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 example

Hover
Focus
Copied to clipboard
<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--5490" role="button" aria-pressed="false">
        <input id="luci-button--5490" 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--66300" role="button" aria-pressed="false">
        <input id="luci-button--66300" 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--85533" role="button" aria-pressed="false">
        <input id="luci-button--85533" 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--icon-only luci-button--input" for="luci-button--36179" role="button" aria-pressed="true">
        <input id="luci-button--36179" 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--29288" role="button" aria-pressed="false">
        <input id="luci-button--29288" 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--29712" role="button" aria-pressed="true">
        <input id="luci-button--29712" 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.