Button is a control component that performs an action on the page. Compared to Link, it's an accent control or call-to-action for performing actions on the page.
In some cases, you can use the button as a Link that leads to another page.
Component consists of the following:
Button.Text has margins on the right and left sides. You can add addons before and after the text. As addons you can use:
Addon before the text has
margin-left, while the trailing addon has
Sizes and margins
|Button size (height in px)||Icon size||Margins||Description|
|M (28px)||M||This is the default size of the button. Use it freely in filters, dropdowns, tables, etc.|
|L (40px)||M||Use this size in modal windows for main actions, empty pages and page states that need to focus user on the main action.|
Button types and themes
Intergalactic Design System has three button types (
use property in API):
primary: Main accent button for filters and basic actions on the page.
secondary: Default non-accent button for secondary/repetitive actions on the page.
tertiary: Button type for third-party actions on the page. The tertiary button can be used when there is enough space and a large click area is needed.
All button types can be used on a white and gray background, as well as on a transparent colored background.
|Button type||Appearance example|
You can use themes for the buttons according to the visual hierarchy on the page. See the visual loudness scale guide.
|deprecated||no theme||no theme|
|no theme||no theme|
The button width is determined by its content. But it can also be stretched to a certain width. For example:
It is necessary when the button text is short, but the button is a CTA on the page or in a modal window, or it performs an important action. Also, in terms of visual hierarchy, it isn’t good to make the button small-sized in such cases.
It is important that the CTA is always visually more significant than the secondary button due to its color and size. So don't hesitate to make button wider if necessary.
If you need to use a single button we recommend you to set it's width to at least 120px.
Margins between buttons
The margin between buttons shall be multiple of 4. If there are several buttons next to each other, use the recommended margins shown in table below.
|L (40px)||M (28px)|
Usage in UX/UI
- Try to have one call-to-action button on the page in the modal window. For example, one green button.
- We recommend you don’t disable CTA, even if something went wrong (especially in filters and modal windows with a single CTA). User needs to understand that the product/service is working. When user clicks on the button, add a message about the error or what user needs to do in this case.
- If you can't do without a button in the disabled state, be sure to include a tooltip for it explaining why the primary action is disabled.
- If there are a lot of actions in your interface, first of all set your priorities. Place controls in your interface according to the visual loudness scale guide. Use inactive "quiet" buttons in the interface. Don't "shout" at the user with your interface, let them work with your product in visual "silence" and comfort.
Use text button when:
- the button is a CTA;
- the interface has enough space for buttons.
We recommend using a button with an icon and text in cases when:
- the button is a CTA, and it needs an additional visual accent (icon);
- the interface has enough space for buttons;
- user isn’t yet familiar with the functionality of the button, and icon or only text may not be enough for them to understand.
We recommend using the icon-only button if:
- interface hasn’t enough space;
- user can easily understand from the context its function (purpose) / user understands the functionality of the button without an explanation.
Add a tooltip with information about button's function to the icon-only buttons. It helps user to understand functionality of the button if the icon isn’t the obvious one.
Button label always starts with a capital letter.
Button label shall not exceed three words. Too wordy controls are difficult to read. Try to fit the desired meaning into the short label.
The label of the button should clearly indicate what happens after user clicks it.
In case when you need to show that button connects or links to some other service, use a branded color for the background or the corresponding color icon of the service.
- You can color the button in a branded color when you need to focus user's attention.
- You can use secondary button with the branded icon inside. This is the safest option in relation to saving the visual hierarchy of the product.
It may also be helpful checking the following branding guidelines:
- Google – Sign-In Branding Guidelines
- Facebook – User Experience Design and Brand Overview
- Instagram – Brand Overview
- LinkedIn – LinkedIn branding policies
- Twitter – Brand Guidelines
- Youtube – Branding Guidelines and Brand resources
- Pinterest – How to use the Pinterest brand in your marketing