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, the examples below represent the most often used types of buttons 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.

Do not combine large and small buttons on a page.
Do not place multiple primary button variations on a page or application panel/window.
Do not 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 take 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. For example, small buttons are 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 going back, canceling, resetting and adding or creating an object.

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>

Secondary Split Button

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>

Button Icons

Add icons to provide clarification of the button's function. 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 (No Text)

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.

Primary Icon-Only Button

Default

Hover

Focus

Active

Selected

Copied to clipboard

<button class="luci-button luci-button--icon-only luci-button--primary">
    <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>

Small Primary Icon-Only Button

Default

Hover

Focus

Active

Selected

Copied to clipboard

<button class="luci-button luci-button--icon-only luci-button--primary luci-button--small">
    <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

Secondary Icon-Only Button

Default

Hover

Focus

Active

Selected

Copied to clipboard

<button class="luci-button luci-button--icon-only luci-button--flat">
    <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>

Small Secondary Icon-Only Button

Default

Hover

Focus

Active

Selected

Copied to clipboard

<button class="luci-button luci-button--icon-only luci-button--flat luci-button--small">
    <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.

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`	Icon only specific padding.
`.luci-button--flat`	`.luci-button`	Removes background and border.