Product Button
This documentation is for the former, if your case fits the latter better, please look at Tool Button instead.
Button sizes are determined by the number of columns in our grid system:
Bold text = recommended
Types | Button sizes | Image sizes | Max in a row |
|---|---|---|---|
Small | 40x40 | 24x24 | 6 |
Medium | 64x64 | 24x24 (With label) 56x56 | 4 |
 | 64x88 | 56x56 (With label) | 4 |
Large | 88x88 | 80x48 (With label) 80x80 | 3 |
 | 88x64 | 80x56 | 3 |
 | 88x120 | 80x80 (With label) | 3 |
Extra large | 136x104 | 128x64 (With label) 128x96 | 2 |
Full | Not recommended for product button, use Tool Button instead. | N/A | 1 |
1 - Container
- Height: 64
- Width: 64
- Background colour: Neutral/White-100 (#FFFFFF)
- Border colour: Border/Border 2 (#E6E6E6)
- Border weight: 1
- Border radius: 4
- State: Default
2 - Product icon
- Icon: Regular wall
3 - Label (optional)
- Height: 26
- Width: 52
- Text colour: Text/Normal (#242424)
- Text align: Center
- Font family: Segoe UI
- Font weight: Regular
- Font size: 11
- Line height: 14
4 - Arrow group
- State: Default
- Colour: Text/Normal (#242424)
1 - Arrow group
- State: Selected
- Colour: Primary/P600 (#306B97)
2 - Connector
- Width: 64
- Border weight: 2
- Border colour: Primary/P600 (#306B97)
3 - Container
- Minimum of 2 product buttons
- Maximum of 4 product buttons in a row
- Height: 72
- Width: 140
- Border weight: 1
- Border colour: Primary/P600 (#306B97)
4 - Active button
- Border weight: 1
- Border colour: Primary/P600 (#306B97)
- State: Selected
5 - Active line
- Border weight: 2
- Width: 64
- Border colour: Primary/P600 (#306B97)
With label
Without label
With label
Without label
The product buttons above are highly recommended for most cases; however, if portrait or landscape product buttons are needed, please use the following options:
No matter the size, the spacing remains consistent for all product buttons (with the exception of small product buttons).

A collapsible group is a special product button that can be used to group multiple similar products together. Users can access the options available by clicking on the bottom right arrow or right clicking on the button. Selecting a specific variant will change the top-level item currently being displayed, and the system will remember the user's last choice. While the size of the arrow is 7x7, the actual hitbox is slightly larger at 9x9 to allow the users to aim more accurately.
Note that for every variant of a product button, there is a corresponding collapsible group variant, with the only requirement being that all the product buttons under a collapsible group must be the same variant as the collapsible group itself. All variants share the same inner paddings, bottom border sizes, and the 4 button per row limit.
It is important to note that the collapsible group allows for a maximum of 8 rows, meaning a maximum of 32 buttons within the container.
This truncation rule applies to all languages in CET. All labels have a fixed text box size depending on the variant chosen for the product button. If the label is too long, try to wrap the text to the next line, and then truncate it if it is still too long. Only one line wrap is allowed; product buttons cannot have more than 2 lines of text.
If the first word does not fit into the first line, it is not allowed to split the word into multiple lines, so there are two options you can pick to resolve this situation:
- Option A: Change the copy to have a shorter first word.
- Option B: Just truncate the first word.
Tips you may follow:
- On average the letter "M" can fit up to 5 characters per line
- On average the letter "I" can fit up to 17 characters per line
Normal/Pressed
Hover
- Border color: Primary/P600 (#306B97)

Normal
- Arrow color: Icon/Stroke (#E7F0F7)
- Arrow size: 7x7
Hover on button
- Border color: Primary/P600 (#306B97)
Hover on arrow
- Border color: Primary/P600 (#306B97)
- Bottom border weight: 2
- Arrow size: 8x8
Selected
- Border color: Primary/P600 (#306B97)
- Bottom border weight: 2
Opened
- Border color: Primary/P600 (#306B97)
- Bottom border radius: 0


