Buttons

Buttons invite and trigger key actions throughout the experience.

Variations

Primary

Use for the highest-priority actions.

Normal

Hover

Active

Focus

Disabled

Code Copied

Copy Code

<button class="spirit-button"> Donate </button>
<button class="spirit-button" disabled> Donate </button>

Use once per page for the key action to complete the user’s task.
Use for the primary action in temporary alerts and overlays, such as modal and dialog.
Use for calls to action that kick off a task, such as register, donate, sign up.

On Dark

Primary on light

Primary on dark

Code Copied

Copy Code

<div class="spirit-container spirit-container--dark">
    <button class="spirit-button"> Donate </button>
</div>

Secondary

Use for non-critical actions.

Normal

Hover

Active

Focus

Disabled

Code Copied

Copy Code

<button class="spirit-button spirit-button--secondary"> Cancel </button>
<button class="spirit-button spirit-button--secondary" disabled> Cancel </button>

Use for non-critical actions, particularly when the button is used as navigation, as in "Learn More" or “Cancel”.

On Dark

Do not use secondary button on dark. Situations using dark background should be simple enough to rely on a single primary button. For tertiary actions on dark, use minimal button.

Minimal

Use for tertiary actions.

Normal

Hover

Active

Focus

Disabled

Code Copied

Copy Code

<button class="spirit-button spirit-button--minimal"> Details </button>
<button class="spirit-button spirit-button--minimal" disabled> Details </button>

On Dark

Use instead of secondary button on dark.

Minimal on light

Minimal on dark

Code Copied

Copy Code

<div class="spirit-container spirit-container--dark">
    <button class="spirit-button spirit-button--minimal"> Details </button>
</div>

With Icon

Icons can be used in buttons when additional clarity is required. Avoid adding icons for decoration.

Icon Left (default)

Icon Right

Status Button with Icon Left

Code Copied

Copy Code

<button class="spirit-button">
    <svg aria-label="camera" class="spirit-icon spirit-icon--camera spirit-button__icon spirit-button__icon--left" aria-hidden="true">
        <use xlink:href="/icons/spirit.svg#camera">
        </use>
    </svg> Edit
</button>
<button class="spirit-button"> Next <svg aria-label="arrow-right" class="spirit-icon spirit-icon--arrow-right spirit-button__icon spirit-button__icon--right" aria-hidden="true">
        <use xlink:href="/icons/spirit.svg#arrow-right">
        </use>
    </svg>
</button>
<button type="submit" class="spirit-button" data-loader="true">
    <span class="spirit-button__icon-contain" data-icon="spinner" aria-hidden="true">
        <svg aria-label="Loading" role="img" class="spirit-icon--spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
            <circle class="spirit-icon--spinner__path" cx="50" cy="50" r="20" stroke-width="4" stroke-miterlimit="10" />
        </svg>
    </span>
    <span class="spirit-button__icon-contain" data-icon="success" aria-hidden="true">
        <svg aria-label="Success" class="spirit-icon spirit-icon--check">
            <use xlink:href="/icons/spirit.svg#check">
                <title>Success</title>
            </use>
        </svg>
    </span>
    <span class="spirit-button__default-text" aria-hidden="false">
        <svg aria-label="search" class="spirit-icon spirit-icon--search spirit-button__icon spirit-button__icon--left" aria-hidden="true">
            <use xlink:href="/icons/spirit.svg#search">
            </use>
        </svg> Search
    </span>
</button>

Submit button with icon is shown in reference to icon placement in markup. See Status Buttons for more information on this button type.

Button With Icon Class Reference

Class	Applies to	Outcome
`.spirit-button__icon`	`.spirit-icon`	Applies default styles for `.spirit-icon` contained within a `.spirit-button`.
`.spirit-button__icon--left`	`.spirit-icon`	Applies horizontal spacing when `.spirit-button__icon` appears to the left of the button label.
`.spirit-button__icon--right`	`.spirit-icon`	Applies horizontal spacing when `.spirit-button__icon` appears to the right of the button label.

Icon Only

Use where an action can be fully represented by an icon and a label don’t fit comfortably alongside that icon.

Normal

Hover

Active

Focus

Disabled

Code Copied

Copy Code

<button class="spirit-button spirit-button--icon-only spirit-button--focus spirit-button--is-icon" title="Open Modal" aria-label="Open Modal">
    <svg aria-label="chevron-right" class="spirit-icon spirit-icon--chevron-right spirit-button__icon" aria-hidden="true">
        <use xlink:href="/icons/spirit.svg#chevron-right">
        </use>
    </svg>
</button>

Icon Only Guidelines

Use only where the icon’s meaning is unambiguous.
Ideal for UI manipulation, such as advancing a carousel or expanding an accordion.
Ideal for toolbars of recognizable icons, such as social sharing.
Avoid using for important CTAs. Prefer primary button.
Do use aria-label and title for assistive technologies and assistive indicators for all users.

On Dark

Icon Only on light

Icon Only on dark

Code Copied

Copy Code

<div class="spirit-container spirit-container--dark">
    <button class="spirit-button spirit-button--icon-only spirit-button--is-icon">
        <svg aria-label="chevron-right" class="spirit-icon spirit-icon--chevron-right spirit-button__icon">
            <use xlink:href="/icons/spirit.svg#chevron-right">
                <title>chevron-right</title>
            </use>
        </svg>
    </button>
</div>

Status Buttons

Use status buttons for key interactions where detailed state feedback is desirable.

Loading

Use when an action isn’t instant and thus acts as a loader or progress indicator.

Normal

Success

Code Copied

Copy Code

<button class="spirit-button" data-loader="true">
    <span class="spirit-button__icon-contain" data-icon="spinner" aria-hidden="true">
        <svg aria-label="Loading" role="img" class="spirit-icon--spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
            <circle class="spirit-icon--spinner__path" cx="50" cy="50" r="20" stroke-width="4" stroke-miterlimit="10" />
        </svg>
    </span>
    <span class="spirit-button__icon-contain" data-icon="success" aria-hidden="true">
        <svg aria-label="Success" class="spirit-icon spirit-icon--check">
            <use xlink:href="/icons/spirit.svg#check">
                <title>Success</title>
            </use>
        </svg>
    </span>
    <span class="spirit-button__default-text" aria-hidden="false"> Submit Donation </span>
</button>
<button class="spirit-button spirit-button--loading" data-loader="true">
    <span class="spirit-button__icon-contain" data-icon="spinner" aria-hidden="false">
        <svg aria-label="Loading" role="img" class="spirit-icon--spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
            <circle class="spirit-icon--spinner__path" cx="50" cy="50" r="20" stroke-width="4" stroke-miterlimit="10" />
        </svg>
    </span>
    <span class="spirit-button__icon-contain" data-icon="success" aria-hidden="true">
        <svg aria-label="Success" class="spirit-icon spirit-icon--check">
            <use xlink:href="/icons/spirit.svg#check">
                <title>Success</title>
            </use>
        </svg>
    </span>
    <span class="spirit-button__default-text" aria-hidden="true"> Submit Donation </span>
</button>
<button class="spirit-button" data-loader="true" data-type="true">
    <span class="spirit-button__icon-contain" data-icon="spinner" aria-hidden="true">
        <svg aria-label="Loading" role="img" class="spirit-icon--spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
            <circle class="spirit-icon--spinner__path" cx="50" cy="50" r="20" stroke-width="4" stroke-miterlimit="10" />
        </svg>
    </span>
    <span class="spirit-button__icon-contain" data-icon="success" aria-hidden="false">
        <svg aria-label="Success" class="spirit-icon spirit-icon--check">
            <use xlink:href="/icons/spirit.svg#check">
                <title>Success</title>
            </use>
        </svg>
    </span>
    <span class="spirit-button__default-text" aria-hidden="true"> Submit Donation </span>
</button>

These button states are presented without Javascript. Product teams should wire up these visual states using their own application logic.

Feedback

Use feedback colors to communicate success or danger on a primary button.

Success

Danger

Success Using Icon

Code Copied

Copy Code

<button class="spirit-button spirit-button--success"> Success </button>
<button class="spirit-button spirit-button--danger"> Delete </button>
<button class="spirit-button spirit-button--success spirit-button--is-icon">
    <svg aria-label="check" class="spirit-icon spirit-icon--check spirit-button__icon">
        <use xlink:href="/icons/spirit.svg#check">
            <title>check</title>
        </use>
    </svg>
</button>

Toggle Button

Use in place of a radio group or checkboxes to capture a key user selection.

Using Checkboxes to Show Toggle States

$10

Normal

$10

Hover

$10

Active/Selected

$10

Focus

$10

Disabled

Code Copied

Copy Code

<div class="spirit-button spirit-button--toggle">
    <input class="spirit-button__input spirit-button__checkbox" type="checkbox" name="checkbox" id="option1" value="10" tabindex="-1" />
    <label for="option1" class="spirit-button__inner" tabindex="0">
        <span class="spirit-button__default-text"> $10 </span>
    </label>
</div>
<div class="spirit-button spirit-button--toggle spirit-button--disabled">
    <input class="spirit-button__input spirit-button__checkbox" type="checkbox" name="checkbox" id="option5" value="10" tabindex="-1" />
    <label for="option5" class="spirit-button__inner" tabindex="0">
        <span class="spirit-button__default-text"> $10 </span>
    </label>
</div>

Using a Radio Group

$250

$120

$60

$30

Code Copied

Copy Code

<div class="spirit-button spirit-button--toggle">
    <input class="spirit-button__input spirit-button__radio" type="radio" name="radiogroup" id="radio-option1" value="250" tabindex="-1" />
    <label for="radio-option1" class="spirit-button__inner" tabindex="0">
        <span class="spirit-button__default-text"> $250 </span>
    </label>
</div>
<div class="spirit-button spirit-button--toggle">
    <input class="spirit-button__input spirit-button__radio" type="radio" name="radiogroup" id="radio-option2" value="120" tabindex="-1" />
    <label for="radio-option2" class="spirit-button__inner" tabindex="0">
        <span class="spirit-button__default-text"> $120 </span>
    </label>
</div>
<div class="spirit-button spirit-button--toggle">
    <input class="spirit-button__input spirit-button__radio" type="radio" name="radiogroup" id="radio-option3" value="60" tabindex="-1" />
    <label for="radio-option3" class="spirit-button__inner" tabindex="0">
        <span class="spirit-button__default-text"> $60 </span>
    </label>
</div>
<div class="spirit-button spirit-button--toggle">
    <input class="spirit-button__input spirit-button__radio" type="radio" name="radiogroup" id="radio-option4" value="30" tabindex="-1" />
    <label for="radio-option4" class="spirit-button__inner" tabindex="0">
        <span class="spirit-button__default-text"> $30 </span>
    </label>
</div>

Apply toggle button to a radio group to capture a selection among mutually-exclusive choices. This is the default control for capturing a donation amount, as depicted above.
Apply toggle button to checkboxes to capture non-exclusive options.

Sizes

Scale buttons according to visual priority and available real estate. Text and icons scale with the overall button and are not independently configurable.

The medium default size can be modified with .spirit-button--extra-small, .spirit-button--small, and .spirit-button--large. Icon only buttons are only available in small and default.

Extra Small

Primary

Secondary

Minimal

Status/Success

Small

Primary

Secondary

Minimal

Icon Only

Status/Success

Default

Primary

Secondary

Minimal

Icon Only

Status/Success

Large

Primary

Secondary

Minimal

Status/Success

Responsive Sizing

Buttons can be sized responsively. By default, buttons stay the same size on all viewports. By adding breakpoint-specific classes, a button can have different sizes for small, medium, and large viewports.

A class of: .spirit-button--extra-small-lg

Would result in an extra small button at the largest viewport breakpoint.

Responsive Sizing Reference

Class	Applies to	Outcome
`.spirit-button--small`	`.spirit-button`	Default syntax for button sizing which works at all sizes. If defining multiple responsive sizes, this is the baseline for small viewports, “mobile first”.
`.spirit-button--small-md`	`.spirit-button`	Applies the `small` size on medium viewports.
`.spirit-button--small-lg`	`.spirit-button`	Applies the `small` size on large viewports.

Guidelines

Use When

To activate or trigger an action
To initiate a task
To elevate the visibility of a navigation link, particularly the ubiquitous “Learn More”
To cancel or dismiss something

Editorial

use a strong, positive verb imperative for calls to action

append the object of the action after the verb if the action is unfamiliar

Visual Style

Accessibility

Use the aria-label attribute on the SVG within an icon only button. See icons for additional guidance.

Code Reference

Markup

Where feasible, use <button>. For applications that generate markup beyond your control, using <input type=”submit”> is also acceptable.

Class Reference

Class	Applies to	Outcome
`.spirit-button--secondary`	`.spirit-button`	Applies secondary button style
`.spirit-button--minimal`	`.spirit-button`	Applies minimal button style
`.spirit-button--icon-only`	`.spirit-button`	Applies icon only button style, which includes conversion to a round shape.
`.spirit-button--toggle`	`.spirit-button`	Use in place of a standard radio/checkbox group. See Toggle Button for specific implementation details on this custom component.
`.spirit-button--[size]`	`.spirit-button`	Applies button size styles. Use `--extra-small`, `--small`, `--large.` Default size is implied and does not need to be specified.
`.spirit-button--fullwidth`	`.spirit-button`	Applies 100% width to button.

Buttons can be sized responsively. See Responsive Sizing.