Tool Button
This documentation is for the latter, if your case fits the former better, please look at Product Button instead.
- 1 - Container
- Background colour: Input/Dropdown/Background (#FFFFFF)
- Border colour: Border/Border 2 (#E6E6E6)
- Border weight: 1
- Border radius: 4
- 2 - Icon (optional)
- Size: 16x16
- 3 - Label (mandatory)
- Text colour: Input/Text (#242424)
All tool buttons must follow the following rules:
- All content (text and icon) within the button must be center-aligned.
- Length of each button is determined by the total length of its content, as long as it fits the grid appropriately.
- Buttons should be arranged according to the user flow if it is known.
- Buttons that should be more prominent to the user are recommended to be the only button in the row.
1 fixed button in a row
2 fixed buttons in a row
3 fixed buttons in a row
4 fixed buttons in a row
Without icon
Note that all sizes used below are for reference only, and are not prescriptive.
Flexible width per buttons in a row
The padding and margins are exactly the same as in the previous section, but as you can see, the buttons no longer share the same size. At first glance, the pixel widths of each button seems arbitrary, but if we overlay the toolbox's columns over the previous example, you can see that it follows the column grid:
As you can see, buttons must occupy a whole number of columns, and must begin and end inside a column. Buttons cannot start or end while in the gutter in between columns.
All tool button sizes can vary per row within a section as long as it uses 6px inner padding and the fit to grid rules.
Unlike product buttons, tool buttons are not allowed to flow text onto the next line, and must truncate immediately.
Icon with long label
No icon with long label
Normal/Pressed
Hover
- Border color: Primary/P600 (#306B97)
While we don't generally have any restriction regarding when to use an icon, there are a few exceptions for Settings and Import/Export/Convert buttons. This can help reduce cognitive load, as users can quickly identify functionality through familiar visual cues.
Any tool button that represents some sort of setting or configuration window must use the gear icon.
Examples:
- Settings
- Pre-configurator
- Floor properties
- Text properties editor
Any tool button that represents an import or export or convert action must not use an icon.
Examples:
- Import to drawing
- Convert DWG
- Export layout to Revit
- Modify converted