Buttons

Use buttons to convey important actions that a user can take on a page, form, or dialog. This button library has a wide variety of button types, sizes and states for a range of applications.

Examples

This button library has a wide variety of button types, sizes and states for a range of applications. There are many variations, states, and types of buttons, however, these represent the most often used types of button within an interface at the default size.

Standard

Copied to clipboard

<button class="luci-button luci-button--primary"> Primary </button>
<button class="luci-button luci-button--secondary"> Secondary </button>
<button class="luci-button luci-button--primary luci-button--disabled" disabled> Disabled </button>

Small

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--small"> Primary </button>
<button class="luci-button luci-button--secondary luci-button--small"> Secondary </button>
<button class="luci-button luci-button--primary luci-button--small luci-button--disabled" disabled> Disabled </button>

Do’s and Don’ts

Label buttons with a verb (“Submit”) or verb-phrase (“Submit Form”).
Strive for short, succinct button labels that clearly describe the action the button will perform.
Avoid lengthy button labels.
Use title case for button labels.
Aim to create a hierarchy of action importance via use of primary and secondary buttons.

Combine large and small buttons on a page.
Place multiple primary button variations on a page or application panel/window.
Use a button as a way of navigating to another place with the exception of back and/or next when part of a process.

Primary Button

Use primary buttons for the highest-priority action that the user is required to do to complete the task.

Copied to clipboard

<button class="luci-button luci-button--primary"> Default </button>

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--disabled" disabled> Disabled </button>

Small Primary Button

Use small buttons in settings with limited space, like toolbars, filters, and advanced search components (often placed above data tables).

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--small"> Default </button>

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--small luci-button--disabled" disabled> Disabled </button>

On Dark

Copied to clipboard

<button class="luci-button luci-button--primary-on-dark"> Default </button>

Copied to clipboard

<button class="luci-button luci-button--primary-on-dark luci-button--disabled" disabled> Disabled </button>

On Dark, Small

Copied to clipboard

<button class="luci-button luci-button--primary-on-dark luci-button--small"> Default </button>

Copied to clipboard

<button class="luci-button luci-button--primary-on-dark luci-button--small luci-button--disabled" disabled> Disabled </button>

Secondary Button

Use secondary buttons for most non-primary actions throughout an interface such as back, cancel, reset, adding or creating an object, or other non-critical actions.

Copied to clipboard

<button class="luci-button luci-button--secondary"> Default </button>

Copied to clipboard

<button class="luci-button luci-button--secondary luci-button--disabled" disabled> Disabled </button>

Small Secondary Button

Copied to clipboard

<button class="luci-button luci-button--secondary luci-button--small"> Default </button>

Copied to clipboard

<button class="luci-button luci-button--secondary luci-button--small luci-button--disabled" disabled> Disabled </button>

Split Button

Use a split button when there are multiple actions but only one can be chosen. The default value of the split button must be the most likely or common action. Split buttons introduce complexity to the user interface, use only when space is limited.

Copied to clipboard

<div class="luci-button-group">
    <button class="luci-button luci-button--primary luci-button--small"> Default </button>
    <button class="luci-button luci-button--primary luci-button--small luci-button--with-icons">
        <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#expand"> </use>
            </svg>
        </span>
    </button>
</div>

Copied to clipboard

<div class="luci-button-group">
    <button class="luci-button luci-button--primary luci-button--small luci-button--disabled" disabled> Disabled </button>
    <button class="luci-button luci-button--primary luci-button--small luci-button--with-icons luci-button--disabled" disabled>
        <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#expand"> </use>
            </svg>
        </span>
    </button>
</div>

Copied to clipboard

<div class="luci-button-group">
    <button class="luci-button luci-button--secondary luci-button--small"> Default </button>
    <button class="luci-button luci-button--secondary luci-button--small luci-button--with-icons">
        <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#expand"> </use>
            </svg>
        </span>
    </button>
</div>

Copied to clipboard

<div class="luci-button-group">
    <button class="luci-button luci-button--secondary luci-button--small luci-button--disabled" disabled> Disabled </button>
    <button class="luci-button luci-button--secondary luci-button--small luci-button--with-icons luci-button--disabled" disabled>
        <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#expand"> </use>
            </svg>
        </span>
    </button>
</div>

Icon Button

Add icons to provide additional affordance to the button intent. Do not use icons purely for visual interest.

Buttons with icon and text

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--with-icons">
    <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#chat"> </use>
        </svg>
        <span class="luci-button__text"> Default </span>
    </span>
</button>

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--with-icons luci-button--disabled" disabled>
    <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#chat"> </use>
        </svg>
        <span class="luci-button__text"> Default </span>
    </span>
</button>

Small Buttons with icon and text

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--small luci-button--with-icons">
    <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#chat"> </use>
        </svg>
        <span class="luci-button__text"> Default </span>
    </span>
</button>

Copied to clipboard

<button class="luci-button luci-button--primary luci-button--small luci-button--with-icons luci-button--disabled" disabled>
    <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#chat"> </use>
        </svg>
        <span class="luci-button__text"> Default </span>
    </span>
</button>

Icon only Button

Icon only buttons are useful when space is constrained and the intent of the icon is well understood or placed in an appropriate context. For example, a common (and appropriate) application of an icon-only button is to trigger a popover component. They can also be used for common actions associated with a content object such as delete or edit.

Copied to clipboard

<button class="luci-button luci-button--icon-only luci-button--small luci-button--with-icons">
    <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#add"> </use>
        </svg>
    </span>
</button>

More examples

Grouping icon buttons

Refer to the Icon only button group If you need to group a set of actions together within a single container. Note the distinct design for this distinct but related component.

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.

Class Reference

Class	Applies to	Outcome
`.luci-button--primary`	`.luci-button`	Creates a primary button.
`.luci-button--secondary`	`.luci-button`	Creates a secondary button.
`.luci-button--primary-on-dark`	`.luci-button`	Creates a primary button for use on dark backgrounds.
`.luci-button--small`	`.luci-button`	Creates a button with a smaller font size and padding.
`.luci-button--with-icons`	`.luci-button`	Ensures correct vertical alignment between button text and icon(s).
`.luci-button--icon-only`	`.luci-button`	Removes background and border and adds icon color.