Tool Button

there are two major types of buttons that can be found in the extension panel product buttons and tool buttons please refer to the respective documents that fits your need better if a button is used to insert a product (snapper or symbol in developer parlanace) into the drawing, then it is a product button docid\ l2jrbivjudj7ixbuu tgz however, if it used to start a tool / animation or open an interface (e g a dialog or a window, leading the user into another modal), then it's a tool button docid\ slm9kidf g5xog2upu0km this documentation is for the latter, if your case fits the former better, please look at product button docid\ l2jrbivjudj7ixbuu tgz instead anatomy default 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) layout & spacing fit to grid rule 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 default 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 variation 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 truncation 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 interaction state default normal/pressed hover border color primary/p600 (#306b97) other rules for icon use 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 settings 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 import/export/convert 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