All States
Includes all applicable states (hover, focus, disabled, etc...)
An interactive visual element that indicates an available action for the user.
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 |
Buttons are for making a change to page state, submitting, or initiating an action.
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.
Primary
Use to call attention to an action or to highlight the preferred call to action on a screen or page.
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.
Acorn offers three themes for buttons. This includes examples as they're rendered in the Windows High Contrast Mode theme "Night Sky".
States this component may appear in. Each state is distinct across Types.
Default
Hover
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.
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.
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.
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".
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.
To pressure test designs, use tools like Google Translate or Transvision to see how design reacts to Chinese, English, and German.
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.
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. |
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.