Button

Definition

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

Anatomy

Usage

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

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

Primary

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

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

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

Primary, Theme = Light

Destructive, Theme = Light

Regular, Theme = Dark

Primary, Theme = Dark

Destructive, Theme = Dark

Regular, Theme = HCM

Primary, Theme = HCM

States

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

Default

Regular, State = Default

Primary, State = Default

Destructive, State = Default

Regular, State = Default

Primary, State = Default

Destructive, State = Default

Regular (HCM), State = Default

Primary (HCM), State = Default

Hover

Regular, State = Hover

Primary, State = Hover

Destructive, State = Hover

Regular, State = Hover

Primary, State = Hover

Destructive, State = Hover

Regular (HCM), State = Hover

Primary (HCM), State = Hover

Active

Regular, State = Active

Primary, State = Active

Destructive, State = Active

Regular, State = Active

Primary, State = Active

Destructive, State = Active

Regular (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

Primary, State = Focus

Destructive, State = Focus

Regular, State = Focus

Primary, State = Focus

Destructive, State = Focus

Regular (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

Primary, State = Disabled

Destructive, State = Disabled

Regular, State = Disabled

Primary, State = Disabled

Destructive, State = Disabled

Regular (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 = 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.

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

Status checklist

Overview of this component's status.