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
Loading...
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

Normal
Hover
Active/Selected
Focus
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

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
use a strong, positive verb imperative for calls to action
append the object of the action after the verb if the action is unfamiliar
append the object of the action after the verb if the action is unfamiliar

Visual Style

use the same size for adjacent buttons
use the same size for adjacent buttons
mix and match sizes on the same row
mix and match sizes on the same row

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.