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>

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">
    <svg aria-label="chevron-right" class="spirit-icon spirit-icon--chevron-right">
        <use xlink:href="/icons/spirit.svg#chevron-right">
            <title>chevron-right</title>
        </use>
    </svg>
</button>

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.

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">
            <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="Success" class="spirit-icon spirit-icon--check">
        <use xlink:href="/icons/spirit.svg#check">
            <title>Success</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"> $10 </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"> $10 </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"> $250 </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"> $120 </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"> $60 </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"> $30 </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.

Buttons can be sized responsively. See Responsive Sizing.

Spirit

Buttons

Variations

Primary

On Dark

Secondary

On Dark

Minimal

On Dark

Icon Only

On Dark

Status Buttons

Loading

Feedback

Toggle Button

Using Checkboxes to Show Toggle States

Using a Radio Group

Sizes

Extra Small

Small

Default

Large

Responsive Sizing

Responsive Sizing Reference

Guidelines

Use When

Editorial

Visual Style

Accessibility

Code Reference

Markup

Class Reference