We have a wide variety of button sizes, styles and types, all designed for specific contexts.
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.
A button can be all text, a single icon or both. For icon-only, make sure the action is clearly implied.
Icon & Text
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.
Consider view density and the button’s position when choosing between the four available sizes.
X-Small: Only use this when you really need to squeeze, like in a card or sidebar. Stick to text or icon-only.
Multiple sizes should never be placed adjacent to one another.
Don'tuse multiple sizes in the same context.
Douse button types to emphasize a preferred option.
Because our Action color demands attention, limit the number of primary actions per page. (We strongly recommend just one.)
Don'tuse many primary actions on a single view.
Douse secondary and subtle buttons to create hierarchy without overwhelming the screen.
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.
The button’s state changes with mouse and keyboard interactions. We can also disable a button entirely.
Buttons follow the UI label guidelines. Use title case without punctuation unless noted otherwise.
Don'tlabel buttons with full sentences.
Domake buttons title case without punctuation.
Labels should clearly indicate the action being taken.
Don'tmake button labels so generic there's no clear outcome.
Dolabel with specific, action-oriented verbs.
Button labels are a great opportunity to inject personality with the Hudl voice.
Don'tmake labels distracting with excessively playful language.
Dowrite labels that sound human.
Button labels should be between 5 and 25 characters.
Don'tmake button labels long and difficult to read.
Domake button labels concise. Use supporting text for additional context if needed.
|No guidelines exist for Windows (yet).|