This is a preview, you can find the current version here.

Last updated: 12/9/2025

Buttons

Buttons are user interface elements which allows users to take actions throughout the project. It is important that they have ample click space and help communicate the importance of their actions.

Styles

Stacks provides 3 different button styles:

Base
Danger
Featured
Tonal

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

Base

Base buttons can gain clear styling with the .s-btn__clear class.

<button class="s-btn" type="button">…</button>
<button class="s-btn s-btn__clear" type="button">…</button>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn`
Clear	`.s-btn` `.s-btn__clear`

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">…</button>
<button class="s-btn s-btn__danger s-btn__clear" type="button">…</button>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn` `.s-btn__danger`
Clear	`.s-btn` `.s-btn__danger` `.s-btn__clear`

Featured buttons are a secondary button style, used to visually draw attention to something new or temporary, usually as part of onboarding or to announce a new feature. These should be used sparingly, and permanent placements should be avoided.

<button class="s-btn s-btn__featured" type="button">…</button>
<button class="s-btn s-btn__featured s-btn__clear" type="button">…</button>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn` `.s-btn__featured`

Tonal

Tonal 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__tonal" type="button">…</button>
<button class="s-btn s-btn__clear s-btn__tonal" type="button">…</button>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn` `.s-btn__tonal`

Anchors

Anchors can be rendered with the .s-btn to adopt a button-like visual style for a link.

<a href="#" class="s-btn">Ask question</a>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn`	Ask question	Ask question	Ask question
Base, Clear	`.s-btn` `.s-btn__clear`	Ask question	Ask question	Ask question
Danger	`.s-btn` `.s-btn__danger`	Ask question	Ask question	Ask question
Danger, Clear	`.s-btn` `.s-btn__danger` `.s-btn__clear`	Ask question	Ask question	Ask question
Featured	`.s-btn` `.s-btn__featured`	Ask question	Ask question	Ask question
Tonal	`.s-btn` `.s-btn__tonal`	Ask question	Ask question	Ask question

Loading

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

<button class="s-btn is-loading" type="button">…</button>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn` `.is-loading`
Base, Clear	`.s-btn` `.s-btn__clear` `.is-loading`
Danger	`.s-btn` `.s-btn__danger` `.is-loading`
Danger, Clear	`.s-btn` `.s-btn__danger` `.s-btn__clear` `.is-loading`
Featured	`.s-btn` `.s-btn__featured` `.is-loading`
Tonal	`.s-btn` `.s-btn__tonal` `.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
Base	`.s-btn` `.s-btn__dropdown`
Base, Clear	`.s-btn` `.s-btn__clear` `.s-btn__dropdown`
Danger	`.s-btn` `.s-btn__danger` `.s-btn__dropdown`
Danger, Clear	`.s-btn` `.s-btn__danger` `.s-btn__clear` `.s-btn__dropdown`
Featured	`.s-btn` `.s-btn__featured` `.s-btn__dropdown`
Tonal	`.s-btn` `.s-btn__tonal` `.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">
        <span class="s-btn--number">198</span>
    </span>
</button>

Type	Class	Default State	Selected State	Disabled State
Base	`.s-btn` `.s-btn--badge`
Base, Clear	`.s-btn` `.s-btn__clear` `.s-btn--badge`
Danger	`.s-btn` `.s-btn__danger` `.s-btn--badge`
Danger, Clear	`.s-btn` `.s-btn__danger` `.s-btn__clear` `.s-btn--badge`
Featured	`.s-btn` `.s-btn__featured` `.s-btn--badge`
Tonal	`.s-btn` `.s-btn__tonal` `.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
Default	N/A	14px
Extra Small	`s-btn__xs`	12px
Small	`s-btn__sm`	13px
Large	`s-btn__lg`	17px

Toggle buttons

Each button class has a selected state which can be visually activated by applying the .is-selected class. When a button can switch between selected and unselected states, it is important to also annotate the button with the aria-pressed attribute for accessibility. A title attribute may also be appropriate to describe what will happen when pressing the button.

<button class="s-btn" type="button" aria-pressed="false" title="…">…</button>
<button class="s-btn is-selected" type="button" aria-pressed="true" title="…">
    …
</button>

<script>
    toggleButton.addEventListener('click', () => {
        let wasSelected = toggleButton.getAttribute('aria-pressed') === 'true';
        let isSelected = !wasSelected;
        toggleButton.classList.toggle('is-selected', isSelected);
        toggleButton.setAttribute('aria-pressed', isSelected.toString());
        …
    });
</script>

Additional styles

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

Disabled

Type	Class	Definition	Example
Disabled	`[aria-disabled="true"]`	Adds disabled styling to any element with `.s-btn` applied.	Ask question

Resets

Type	Class	Definition	Example
Unset	`.s-btn__unset`	Removes all styling from a button and reverts focus states to browser default.
Link	`.s-btn__link`	Styles a button element as though it were a link. Instead of transforming an `s-btn` to a link, you most likely want to style a `button` as 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
Facebook	`.s-btn__facebook`	Styles a button consistent with Facebook’s branding
Google	`.s-btn__google`	Styles a button consistent with Google’s branding
GitHub	`.s-btn__github`	Styles a button consistent with GitHub’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" type="button">Post answer</button>
<button class="s-btn s-btn__clear" 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="d-flex g4 fd-column">
    <button class="s-btn" type="button">Post answer</button>
    <button class="s-btn s-btn__clear" 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="d-flex g4">
    <div class="d-flex ai-center sm:fd-column sm:ai-start">
        <h3 class="mb0 sm:mb16 mr-auto fs-title fw-normal">
            Write your response
        </h3>

        <div class="d-flex g4 sm:fd-row-reverse sm:jc-end">
            <button class="s-btn s-btn__clear" type="button">Cancel</button>
            <button class="s-btn" type="button">Post answer</button>
        </div>
    </div>
</div>

Write your response

Edit on GitHub