Components

Button

Design
Code

Let users perform a single, clearly expressed action.

We have a wide variety of button sizes, styles and types, all designed for specific contexts.

Type

The button type is determined by its purpose and the action being taken.

Primary: Save the primary button for the strongest available action. Try not to use multiple in a single view.

Icons

A button can be all text, a single icon or both. For icon-only, make sure the action is clearly implied.

Text

Icon & Text

Icon Only

Style

Your button style depends on how much attention you want to draw to the action.

Standard: Background colors and rounded corners make the standard button look clickable, making it clear the user can and should take action.

Size

Consider view density and the button’s position when choosing between the three available sizes.

Small: Ideal for dense interfaces or when the button’s action is secondary to page content.

Associated Actions

Multiple sizes should never be placed adjacent to one another.

button-associatedactions-dont

Don'tuse multiple sizes in the same context.

button-associatedactions-do

Douse button types to emphasize a preferred option.

Usage

Primary Actions

Because our Action color demands attention, limit the number of primary actions per page. (We strongly recommend just one.)

button-limitprimaryactions-dont

Don'tuse many primary actions on a single view.

button-limitprimaryactions-do

Douse secondary and subtle buttons to create hierarchy without overwhelming the screen.

Statuses

Not every button needs the following statuses. Save them for actions that could take some time to complete.

Statuses come as a package deal. Never use one on its own.

State

The button’s state changes with mouse and keyboard interactions. We can also disable a button entirely.

Default

Disabled

Microcopy

Case & Punctuation

Buttons follow the UI label guidelines. Use title case without punctuation unless noted otherwise.

button-caseandpunctuation-dont

Don'tlabel buttons with full sentences.

button-caseandpunctuation-do

Domake buttons title case without punctuation.

Action

Labels should clearly indicate the action being taken.

button-action-dont

Don'tmake button labels so generic there's no clear outcome.

button-action-do

Dolabel with specific, action-oriented verbs.

Hudl Voice

Button labels are a great opportunity to inject personality with the Hudl voice.

button-hudlvoice-dont

Don'tmake labels distracting with excessively playful language.

button-hudlvoice-do

Dowrite labels that sound human.

Length

Button labels should be between 5 and 25 characters.

button-length-dont

Don'tmake button labels long and difficult to read.

button-length-do

Domake button labels concise. Use supporting text for additional context if needed.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android