Developer Button
Description
Button is a control component that performs an action on the page. Compared to Link component, it's an accent control or call-to-action for performing actions on the page.
TIP
In some cases, you can use the button as a Link component that leads to another page.
Component composition
Component consists of the following:
Button.TextButton.Addon
You can add addons before and after the text. As addons you can use:
Appearance
Sizes
| 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. |
Types
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.
use | Appearance example |
|---|---|
primary |  |
secondary |  |
tertiary |  |
Themes
You can use themes (theme property in API) for the buttons according to the visual hierarchy on the page. See the visual loudness scale guide.
Invert theme button is used on dark or colored background. For example in Tooltip, NoticeBubble, etc.
use / theme | muted | info | success | danger | invert |
|---|---|---|---|---|---|
primary | no theme |  |  |  |  |
secondary |  | deprecated | no theme | no theme |  |
tertiary |  |  | no theme | no theme |  |
Button with Link styles
WARNING
This component was created to ensure proper accessibility for existing patterns in the interface. Avoid adding buttons with link styles into new interfaces, especially with use="primary". Instead, use either Button or Link depending on what the element does.
If you need an element that looks like a link, but has the native button semantics, use the separate ButtonLink component instead of a link. For example, in the Feedback and ProductHead components, use ButtonLink as the dialog trigger.
| Button type | Appearance example & states |
|---|---|
primary |  |
secondary |  |
The following table shows in which cases you should use primary or secondary ButtonLink.
| Action on the page | use="primary" | use="secondary" |
|---|---|---|
| Reloading the page | ✅ | ❌ |
| Updating data in a small block/widget | ✅ | ❌ |
| Updating data in a table row | Allowed if it's an important action | ✅ |
| Opening a modal window | Allowed if it's an important action | ✅ |
| Opening a dropdown | Allowed if it's an important action | ✅ |
| Opening an accordion | Allowed if it's an important action | ✅ |
| Opening the full text on the same page | ❌ | ✅ |
DescriptionTooltip on click | ❌ | ✅ |
Button width
The button width is determined by its content. But it can also be stretched to a certain width. For example:
w="100%"It's 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's 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.
Button label
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.
Grouped buttons
The margin between buttons should 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) |
|---|---|
 |  |
Button variations
Text button
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.
Icon-only button
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.
TIP
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.
Branded buttons
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
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.