Button Usage
Spec
Always “hug contents” button widths, relative to their label.
Provides another level of hierarchy besides color, type, and sentiment
A larger primary button is good for usability (“Add to cart” will be larger than “Edit” or “Cancel”)
Minimum or fixed width buttons will potentially lead to more container problems, especially in sidebars or mobile screens
Lastly, and least importantly, it’s easier on designers and developers to remember and implement
Exceptions:
- Stacking buttons: these should be the same width
Buttons on mobile screens - stretch to fill the viewport on very small screens (less than 400px)
Button labels need to be a minimum character set (minimum of ~5-8 characters). No “OK” buttons allowed.
Usage
Sentiments communicate intent, while type will help communicate hierarchy and emphasis.
Sentiments
Action- Important
- Primary function of the area or page
- Required to advance
Communicates a destructive action, loss of data, or required information
Types
Filled
Primary and highest emphasis action within the area, page, or window
- More important than other actions
- Main/default action in a group
- Should be used once per large focused area
- Use to indicate going to a next step
token: usage=‘filled’
Primary(/Action)
Main action, the primary focus of the page, section, or module. Completes or advances the progress or step.
token: palette=‘action’
Weak(/Neutral)
Performs a less-important yet still primary action. Not pertinent to advancement yet performs an important action, e.g. sub-steps within a page-sized form
token: palette=‘neutral’
Danger
- Performs a destructive action
token: palette=‘danger’
Outline
Lower emphasis actions that are optional or secondary to the primary action
- Actions that are not necessary to advance
- Alternate options to the primary action
token: usage=‘outline’
Primary(/Action)
- Use as secondary actions next to primary filled buttons
token: palette=‘action’
Weak(/Neutral)
- Use as secondary actions next to weak filled buttons
token: palette=‘neutral’
Danger
- Performs a destructive action
token: palette=‘danger’
Text
- Lowest priority actions
- Don’t distract from nearby content
- Use for the lowest emphasis
Use alone where surrounding or referenced content must be emphasized
Use when multiple actions appear and a low-emphasis action is needed (Cancel or Reset)
token: usage=‘text’
Primary(/Action)
- In line with primary action, use as a tertiary action
token: palette=‘action’
Weak(/Neutral)
- In line with weak actions, use as a tertiary weak action
token: palette=‘neutral’
Danger
- Performs a destructive action
token: palette=‘danger’
Size
Buttons come in two sized: md and lg. The default size is lg. Use consistent button sizes appropriate to their surroundings and use.
Use large buttons as the default in most cases. These present the largest tap targets and offer the most space for longer labels
token: size=‘lg’
token: size=‘md’
Start and end icons
Use leading icons for presentational and ornamental glyphs only, to help communicate meaning and context.
Directional or action-oriented icons such as arrows should always be placed on the end side of the button.
Avoid using icons on both the start and end sides of a button. This has potential to confuse the user. Start and end icons can be used in some cases, i.e. an external link icon or new window icon to help convery these behaviors to the user.