Stacks

Styles

Stacks provides 5 different button styles:

Secondary
Primary
Danger
Muted
Inverted

Each style is explained below, detailing how and where to use these styles.

Secondary

All buttons, by default, are secondary buttons. There are three, graduating secondary styles:

Clear (default)
Outlined
Filled

A button’s visual weight should correspond to the importance of the button’s action. The more important the action, the heavier the button’s visual weight.

<button class="s-btn" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__outlined" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__filled" type="button" aria-pressed="false">…</button>

Type	Class	Default State	Selected State	Disabled State
Clear	`.s-btn`
Outlined	`.s-btn` `.s-btn__outlined`
Filled	`.s-btn` `.s-btn__filled`

Primary

A visual style used to highlight the most important actions. To avoid confusing users, don’t use more than one primary button within a section or view.

<button class="s-btn s-btn__primary" type="button" aria-pressed="false">…</button>

Type	Class	Default State	Selected State	Disabled State
Primary	`.s-btn` `.s-btn__primary`

Danger

Danger buttons are a secondary button style, used to visually communicate destructive actions such as deleting content, accounts, or canceling services.

<button class="s-btn s-btn__danger" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__outlined s-btn__danger" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__filled s-btn__danger" type="button" aria-pressed="false">…</button>

Type	Class	Default State	Selected State	Disabled State
Clear	`.s-btn` `.s-btn__danger`
Outlined	`.s-btn` `.s-btn__danger` `.s-btn__outlined`
Filled	`.s-btn` `.s-btn__danger` `.s-btn__filled`

Muted

Muted buttons are a secondary button style, a grayscale visual treatment. Used in layouts for the least important items or currently inactive actions.

<button class="s-btn s-btn__muted" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__outlined s-btn__muted" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__filled s-btn__muted" type="button" aria-pressed="false">…</button>

Type	Class	Default State	Selected State	Disabled State
Clear	`.s-btn` `.s-btn__muted`
Outlined	`.s-btn` `.s-btn__muted` `.s-btn__outlined`
Filled	`.s-btn` `.s-btn__muted` `.s-btn__filled`

Inverted

More of a visual state then a style. Inverted buttons are used to visually separate buttons from dark backgrounds. Examples would be messaging heroes or banners which have darker backgrounds. Inverted, filled buttons are considered primary buttons.

<button class="s-btn s-btn__inverted" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__outlined s-btn__inverted" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__filled s-btn__inverted" type="button" aria-pressed="false">…</button>

Type	Class	Default State	Selected State	Disabled State
Clear	`.s-btn` `.s-btn__inverted`
Outlined	`.s-btn` `.s-btn__inverted` `.s-btn__outlined`
Filled	`.s-btn` `.s-btn__inverted` `.s-btn__filled`

Loading

Any button can have a loading state applied by adding the .is-loading state class.

<button class="s-btn is-loading" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__outlined is-loading" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__filled is-loading" type="button" aria-pressed="false">…</button>
<button class="s-btn s-btn__primary is-loading" type="button" aria-pressed="false">…</button>

Type	Class	Default State	Selected State	Disabled State
Primary	`.s-btn` `.s-btn__primary` `.is-loading`
Secondary, Clear	`.s-btn` `.is-loading`
Secondary, Outlined	`.s-btn` `.s-btn__outlined` `.is-loading`
Secondary, Filled	`.s-btn` `.s-btn__filled` `.is-loading`
Danger, Clear	`.s-btn` `.s-btn__danger` `.is-loading`
Danger, Outlined	`.s-btn` `.s-btn__danger` `.s-btn__outlined` `.is-loading`
Danger, Filled	`.s-btn` `.s-btn__danger` `.s-btn__filled` `.is-loading`
Muted, Clear	`.s-btn` `.s-btn__muted` `.is-loading`
Muted, Outlined	`.s-btn` `.s-btn__muted` `.s-btn__outlined` `.is-loading`
Muted, Filled	`.s-btn` `.s-btn__muted` `.s-btn__filled` `.is-loading`
Inverted, Clear	`.s-btn` `.s-btn__inverted` `.is-loading`
Inverted, Outlined	`.s-btn` `.s-btn__inverted` `.s-btn__outlined` `.is-loading`
Inverted, Filled	`.s-btn` `.s-btn__inverted` `.s-btn__filled` `.is-loading`

Dropdowns

Adding the class .s-btn__dropdown to any button style will add an appropriately-styled caret. These should be paired with a menu or popover.

<button class="s-btn s-btn__dropdown" type="button">Dropdown</button>

Type	Class	Default State	Selected State	Disabled State
Primary	`.s-btn` `.s-btn__primary` `.s-btn__dropdown`
Secondary, Clear	`.s-btn` `.s-btn__dropdown`
Secondary, Outlined	`.s-btn` `.s-btn__outlined` `.s-btn__dropdown`
Secondary, Filled	`.s-btn` `.s-btn__filled` `.s-btn__dropdown`
Danger, Clear	`.s-btn` `.s-btn__danger` `.s-btn__dropdown`
Danger, Outlined	`.s-btn` `.s-btn__danger` `.s-btn__outlined` `.s-btn__dropdown`
Danger, Filled	`.s-btn` `.s-btn__danger` `.s-btn__filled` `.s-btn__dropdown`
Muted, Clear	`.s-btn` `.s-btn__muted` `.s-btn__dropdown`
Muted, Outlined	`.s-btn` `.s-btn__muted` `.s-btn__outlined` `.s-btn__dropdown`
Muted, Filled	`.s-btn` `.s-btn__muted` `.s-btn__filled` `.s-btn__dropdown`
Inverted, Clear	`.s-btn` `.s-btn__inverted` `.s-btn__dropdown`
Inverted, Outlined	`.s-btn` `.s-btn__inverted` `.s-btn__outlined` `.s-btn__dropdown`
Inverted, Filled	`.s-btn` `.s-btn__inverted` `.s-btn__filled` `.s-btn__dropdown`

Badges

Adding an .s-btn--badge to any button will add an appropriately-styled badge.

<button class="s-btn" type="button">
    Badge
    <span class="s-btn--badge">200</span>
</button>

Type	Class	Default State	Selected State	Disabled State
Primary	`.s-btn` `.s-btn__primary` `.s-btn--badge`
Secondary, Clear	`.s-btn` `.s-btn--badge`
Secondary, Outlined	`.s-btn` `.s-btn__outlined` `.s-btn--badge`
Secondary, Filled	`.s-btn` `.s-btn__filled` `.s-btn--badge`
Danger, Clear	`.s-btn` `.s-btn__danger` `.s-btn--badge`
Danger, Outlined	`.s-btn` `.s-btn__danger` `.s-btn__outlined` `.s-btn--badge`
Danger, Filled	`.s-btn` `.s-btn__danger` `.s-btn__filled` `.s-btn--badge`
Muted, Clear	`.s-btn` `.s-btn__muted` `.s-btn--badge`
Muted, Outlined	`.s-btn` `.s-btn__muted` `.s-btn__outlined` `.s-btn--badge`
Muted, Filled	`.s-btn` `.s-btn__muted` `.s-btn__filled` `.s-btn--badge`
Inverted, Clear	`.s-btn` `.s-btn__inverted` `.s-btn--badge`
Inverted, Outlined	`.s-btn` `.s-btn__inverted` `.s-btn__outlined` `.s-btn--badge`
Inverted, Filled	`.s-btn` `.s-btn__inverted` `.s-btn__filled` `.s-btn--badge`

Sizes

A button’s default font-size is determined by the @body-fs variable. To change the button’s font-size, use the following classes with .s-btn:

Type	Class	Size
Extra Small	`s-btn__xs`	11px
Small	`s-btn__sm`	12px
Default	N/A	13px
Medium	`s-btn__md`	17px
Large	`s-btn__lg`	21px
Extra Large	`s-btn__xl`	27px

Additional classes

Stacks provides additional classes for cases that are a bit more rare.

Resets

Type	Class	Definition	Example
Unset	`.s-btn__unset`	Removes all styling from a button including its focus state.
Link	`.s-btn__link`	Styles a button element as though it were a link.

Icons

Type	Class	Definition	Examples
Icon	`.s-btn__icon`	Adds some margin overrides that apply to an icon within a button

Type	Class	Definition	Examples
Facebook	`.s-btn__facebook`	Styles a button consistent with Facebook’s branding
Google	`.s-btn__google`	Styles a button consistent with Google’s branding

Ordering

To maintain product consistency, buttons should maintain the following layout ordering:

Within a row

Most button groups should be ordered from the most important to the least important action, left to right.

<button class="s-btn s-btn__primary" type="button">Post answer</button>
<button class="s-btn s-btn__filled" type="button">Save draft</button>
<button class="s-btn s-btn__outlined" type="button">Preview answer</button>
<button class="s-btn" type="button">Cancel</button>

Within a column

Sometimes the layout dictates that buttons need to be stacked on top of each other. Again, these buttons should be stacked from the most important to the least important, top to bottom.

<div class="grid gs4 ff-column-nowrap">
    <button class="grid--cell s-btn s-btn__primary" type="button">Post answer</button>
    <button class="grid--cell s-btn s-btn__filled" type="button">Save draft</button>
    <button class="grid--cell s-btn s-btn__outlined" type="button">Preview answer</button>
    <button class="grid--cell s-btn" type="button">Cancel</button>
</div>

Within a header

Sometimes the best place for a series of actions is in the same area as the title. In these cases, the buttons should be pulled to the right. Within this instance, the button order should be reversed with the most important action to the far right and the least important action to the far left.

<div class="grid gs4">
    <div class="grid ai-center sm:fd-column sm:ai-start">
        <h3 class="grid--cell mb0 sm:mb16 mr-auto fs-title fw-normal">Write your response</h3>

        <div class="grid gs4 sm:fd-row-reverse sm:jc-end">
            <button class="grid--cell s-btn" type="button">Cancel</button>
            <button class="grid--cell s-btn s-btn__filled" type="button">Preview answer</button>
            <button class="grid--cell s-btn s-btn__primary" type="button">Post answer</button>
        </div>
    </div>
</div>

Buttons