Button

Definition

An interactive visual element that indicates an available action for the user.

Anatomy

Key

Description

Value?

Token?

1

Shape: Border Radius

4px

token unavailable

2

Shape: Background Color

#0060DF

token unavailable

3

Shape: Padding (block, inline)

4px, 16px

token unavailable

4a

Text: Font

SF Pro Text

token unavailable

4b

Text: Size/Line Height

13px/18.2px

token unavailable

4c

Text: Color

#FBFBFE

token unavailable

Usage

Buttons are for making a change to page state, submitting, or initiating an action.

  • Confirm an action or make a change.
  • Don't use buttons in place of links.
  • Don't use buttons to navigate in-page or to new pages.

Types

Acorn offers three button types.

See Themes for information on differences across themes.
See
States for information on interactive states.
See Sizes for information on button size variants.

Regular

Use for secondary actions (such as Cancel). Sometimes appears beside a primary button, sometimes appears alone. Multiple regular buttons can be used for several actions of equal importance, such as on a settings page.

Type = Regular

Type = Regular

Primary

Use to call attention to an action or to highlight the preferred call to action on a screen or page.

Type = Primary

Type = Primary

Destructive

Use to deliberately create friction to warn users of the impact of an action that could be difficult or impossible to undo, such as deleting data. They are most commonly found in confirmation modals. Be thoughtful about using destructive buttons because they are a loud distress signal.

Type = Destructive

Type = Destructive

 

Themes

Acorn offers three themes for buttons. This includes examples as they're rendered in the Windows High Contrast Mode theme "Night Sky".

Regular, Theme = Light

Regular, Theme = Light

Primary, Theme = Light

Primary, Theme = Light

Destructive, Theme = Light

Destructive, Theme = Light

Regular, Theme = Dark

Regular, Theme = Dark

Primary, Theme = Dark

Primary, Theme = Dark

Destructive, Theme = Dark

Destructive, Theme = Dark

Regular, Theme = HCM

Regular, Theme = HCM

Primary, Theme = HCM

Primary, Theme = HCM

States

States this component may appear in. Each state is distinct across Types.

Default

Regular, State = Default

Regular, State = Default

Primary, State = Default

Primary, State = Default

Destructive, State = Default

Destructive, State = Default

Regular, State = Default

Regular, State = Default

Primary, State = Default

Primary, State = Default

Destructive, State = Default

Destructive, State = Default

Regular (HCM), State = Default

Regular (HCM), State = Default

Primary (HCM), State = Default

Primary (HCM), State = Default

Hover

Regular, State = Hover

Regular, State = Hover

Primary, State = Hover

Primary, State = Hover

Destructive, State = Hover

Destructive, State = Hover

Regular, State = Hover

Regular, State = Hover

Primary, State = Hover

Primary, State = Hover

Destructive, State = Hover

Destructive, State = Hover

Regular (HCM), State = Hover

Regular (HCM), State = Hover

Primary (HCM), State = Hover

Primary (HCM), State = Hover

Active

Regular, State = Active

Regular, State = Active

Primary, State = Active

Primary, State = Active

Destructive, State = Active

Destructive, State = Active

Regular, State = Active

Regular, State = Active

Primary, State = Active

Primary, State = Active

Destructive, State = Active

Destructive, State = Active

Regular (HCM), State = Active

Regular (HCM), State = Active

Primary (HCM), State = Active

Primary (HCM), State = Active

Focus

:focus states are used both for keyboard navigation, and when a user focuses using a mouse. They are vital for accessibilty and may not be omitted.

The CSS pseudo class :focus does not affect visual output in iOS or Android.

Regular, State = Focus

Regular, State = Focus

Primary, State = Focus

Primary, State = Focus

Destructive, State = Focus

Destructive, State = Focus

Regular, State = Focus

Regular, State = Focus

Primary, State = Focus

Primary, State = Focus

Destructive, State = Focus

Destructive, State = Focus

Regular (HCM), State = Focus

Regular (HCM), State = Focus

Primary (HCM), State = Focus

Primary (HCM), State = Focus

Disabled

Disabled visual styles should only be applied when the button is disabled.

Disabled buttons are unusable. Disable a button to keep users from interacting with the button until conditions are met.

Regular, State = Disabled

Regular, State = Disabled

Primary, State = Disabled

Primary, State = Disabled

Destructive, State = Disabled

Destructive, State = Disabled

Regular, State = Disabled

Regular, State = Disabled

Primary, State = Disabled

Primary, State = Disabled

Destructive, State = Disabled

Destructive, State = Disabled

Regular (HCM), State = Disabled

Regular (HCM), State = Disabled

Primary (HCM), State = Disabled

Primary (HCM), State = Disabled

Sizes

Acorn offers two sizes for buttons.

Sizes are the same across Types, States, and Themes.

Small buttons are used in smaller UI surfaces (e.g. Infobar). Only Secondary and Primary buttons occur in the Small size.

Size = Default

Size = Default

Size = Small

Size = Small

Behavior and interaction

Buttons are interactive elements, when a user engages a button there should be positive, non-blocking, accessible feedback that the interaction was successful.

This is possible through visual state changes on :hover, or :focus.

A button's outcome should be clear to the user before it is "pressed".

Writing guidelines

Button label text should be clear, descriptive, and use active verbs so people know what to expect when they interact with the button.

  • Write labels in sentence case.
  • Lead with clear action verbs that convey outcome.
  • Use Choose or Select in place of Click or Tap.
  • Be consistent with terms inside the button and any instructional text.
  • When possible, include labels when using icons.
  • Use unnecessary words or articles, such as "the, an, or a".
  • Use vague labels.

Casing: Write button text labels in sentence case. Capitalize the first word and lowercase the rest (unless the text contains a proper noun).

Width: Set a max width for the button, designing for at least 50+ string growth compared to English. Buttons themselves should not have a hard-coded fixed width — width is determined by length of text labels.

Stacking: Allow buttons to grow as much as they need to within the max width. When you have two buttons and they don’t fit in the same line, then wrap the button component itself (not the button text). The secondary button will move to the second line. Both buttons will be the same width.

Localization

To pressure test designs, use tools like Google Translate or Transvision to see how design reacts to Chinese, English, and German.

Accessibility

Use a text label color that has sufficient color contrast with your button's background color. Check contrast across all states.

Use an appropriate font size for your text label, ensuring proper legibility.

Provide alternative text for all buttons.

Use a sufficient amount of padding to ensure your button is large enough to reduce frustrating click or touch scenarios.

Change log

Date

Version

Notes

Mar 28, 2023

1.0.1

Added HCM theme info, and fixed some typos

Feb 15, 2023

1.0.0

Public Release

Jan 31, 2023

0.1.0

Initial draft of button guidance.

Status checklist

Overview of this component's status.

All States

Includes all applicable states (hover, focus, disabled, etc...)

All Themes

Works properly across all themes (theme name, theme name, etc...)

All Modes

Works properly across all modes (light, dark, high contrast)

All Desktop Environments

Works properly across all environments (Windows, MacOS, Linux)

All Mobile Environments

Works properly across all environments (iOS, Android)

Accessibility

Has been tested and reviewed by A11y Team.

Color / Accessibility

All color has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Text / Accessibility

All text has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Contrast / Accessibility

All contrast has been tested against and passed all the latest WCAG 2.1 A & AA standards.

Interaction / Accessibility

All interactions have been tested against and passed all the latest WCAG 2.1 A & AA standards.

Content Design Review

Has been tested and reviewed by Content Design Team.

Writing Guidelines

Follows guidance for writing and language use.

Localization

Works properly across locales, and includes guidance for RTL languages.

Defined Behavior

Guidance for behavior when interacted with.

Defined Interactions

Guidance for interaction capabilities, ie. keyboard interactions.

Usage Guidelines

Includes guidance for usage, dos and don'ts, best practices.

Tokens

All attributes are available as tokens.

Figma Library

Has a reusable Figma component.

Storybook

Is documented in Storybook.

Code

Has a code counterpart.