Guidelines
Guidelines
Usage
A Button should:
- Be used to trigger an action or navigate.
- Clearly convey its function and purpose to the user.
- Maintain consistency in design and behaviour across the product.
- Use contrasting appearanceaccordingly. In light interfaces, appearance should be set to 'dark'. In dark interfaces, appearance should be set to 'light'.
Button vs. Link
A Button component should:
- Be used for performing actions on the platform, such as “Watch...”, “Read...”, “Sign up...”, “Add...”, "Next", "Close", and "Skip".
A Link component should:
- Be used for navigation, especially when linking to an external source is desired.
- Be used in conjunction with text.
- Not be mixed with Buttons in layouts.
Kind
Similar to size , the kind property establishes a hierarchy among all Buttons in a layout and indicates its level within this hierarchy.
A Button should:
- In general, be set to 'primary' kind once per layout or per scrolled device viewport, as 'primary' indicates the most important action.
- Use 'secondary' when placed adjacent to a 'primary' Button.
- Use 'tertiary' for suggesting actions (e.g. "Show more", "Read more", "View all", "Learn more") or for utility actions (e.g. save, follow, link to social media). Can be used as a stand-alone or in conjunction with the ‘primary’ kind . Can be considered the default kind Button.
- Use 'cover-up' when placed on images. This kind of Button is designed to be visible on any kind of image, no matter its brightness.
- Use 'bare' or 'link' to minimize distraction from the component's content.
States
A Button should:
- Use the disabled state when the user should be informed that an action cannot be performed. The disabled state will also inform assistive technologies accordingly.
- Switch into the busy state, equipped with a Spinner, if the user's action triggers a process that requires time to complete, like submitting forms, saving changes or executing complex operations. During asynchronous validation, the Button is non-clickable, avoiding user interference and ensuring a controlled submission process.
Content
A Button's label communicates the action that will be performed when the user engages with it, and when applicable, icons further reinforce this action for enhanced clarity.
A Button's label should:
- Briefly and concisely convey its purpose and function.
- Lead with clear and actionable verbs such as “Watch…”, “Join…”, “Sign up...".
- Avoid ambiguity or confusion in its language.
- Use sentence case, capitalizing only the first word and proper nouns.
A Button's icon should:
- Be used purposefully to enhance usability and visual clarity, reflecting and complementing the button label's meaning.
- Maintain consistency in usage across buttons to establish familiarity and aid user understanding.
- Only be used without a label when the context makes it very clear what the button is for and doesn't need explanatory text.
Size
The size property establishes a hierarchy among Buttons.
A Button should:
- Relate to its surroundings. Larger typography requires larger buttons.
- Use the same size across all viewports.
- Use 'medium' as the default size as it is suitable for most interfaces and considered as the preferred size.
- Use 'large' for Hero panels and elements highlighting content and use large typography.
- Use 'small' to minimize distraction from the component's content. Great for suggesting or utility actions.
Shape
A Button's shape impacts the overall look and feel of a layout. The shape is based on the main character and target audience of the platform or product.
A Button should:
- Use 'pill' shape and 'circle' shape when used on B2C platforms.
- Use 'rectangle' and 'square' shapes when used on B2B or B2E platforms.
Width
The width property sets a Button's width to automatically fit its content or container.
A Button should:
- In general, use 'default' width.
- Use full-width to be associated with another full-width component or section, following the Gestalt Principles of Common Region and Closure.
- Have a width that is less than half of the viewport width, when set to 'full-width' on viewports larger than mobile.
- Use default width when placed horizontally next to other Buttons.
- Use full-width when placed vertically next to other Buttons.
- Use the same width value among adjacent Buttons.