We utilize this component to perform an action that is hinted by label or icon. Label, icon or their combination inside the component expresses what action will be triggered. Label should be short and using a verb to communicate what will happen when user triggers the action.
Variants
We use a system of variants of buttons that provides options to keep the visual hierarchy of the interface clean and organized. It is very important to navigate users to primary actions fast yet provide options to access additional functions. For this reason we have transactional, primary and secondary buttons. Secondary buttons come in two sizes to better emphasize priorities of available actions. For a specific purposes we also use ButtonLink component (see more in ButtonLink) which behaves exactly like a button but doesn’t have a background applied on encapsulating container.
Transactional button
This component is primarily designed for use in “Join“ flows. It serves as component to guide user through conversion funnels. For example choose new plan, add to bill or make changes to user’s subscription. The goal of this component is to clearly navigate user through steps that need to be taken to accomplish a conversion journey.
Transactional button has single look and feel either for dark and light themed interfaces.
Primary button
This component serves for the main primary action on the screen, for example for Play. It should be used only once per screen. This doesn’t count for use in modal window within the same screen.
Dark theme
Light theme
Secondary button
Actions initiated by this component complement primary action in the screen. For this use case is this component. In case you need to add actions with lower priority use this component in small size. This will keep order of visual hierarchy in the interface.
Dark theme — Large (52px), Small (44px)
Light theme — Large (52px), Small (44px)
Optional width-scaling of Button
If there is a need to use wider buttons, for example to fit them in encapsulating container, you can manually extend the width in your design. This applies on buttons that have a label only. Other buttons (carrying icon only or icon with label) are not allowed to be used this way.
You should be able to cover most of the use cases with button that sets automatically its width by hugging of its content (label, icon or both).
In case of manual setting of the width bear in mind that maximum applicable value for it is 300 px.
Setting button width 101
- Label only primary and secondary buttons
- full-width & stacked on mobile (considering the horizontal spacing)
- fixed width of 300 dp/pt (iOS/Android), stacked & centered on tablets
- Primary and secondary buttons w/ icons
- hugging content
Modifiers
We have buttons for light and dark themed interfaces in library of components and so it is for mobile apps and web which are available in separate Figma files. Use them accordingly.
In situ
Primary and secondary buttons
Transactional and secondary buttons
Related resources
-> Specs in Figma
