Product 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 former, if your case fits the latter better, please look at tool button https //app archbee com/docs/byydscj3ogojip9up1sac/l2jrbivjudj7ixbuu tgz#slm9kidf g5xog2upu0km instead overview 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 128x96 2 128x64 (with label) 2 full not recommended for product button, use tool button docid\ slm9kidf g5xog2upu0km instead n/a 1 anatomy default 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 13 4 arrow group state default colour text/normal (#242424) collapsible group 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) layout & spacing default small medium with label without label large with label without label other variations 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) collapsible group 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 small medium large code examples to use these tool groups, use a toolgrouplimb as a parent of the buttons you want to be under the tool group cm // toolgrouplimb can take an optional default key, otherwise the first button will be the default toolgrouplimb rollers("rollers", default="wallsectionaldoor"); snapperlimb(rollers, pkg, "wallrollerdoor", image=icon("wall/rollerdoorfacelift")); snapperlimb(rollers, pkg, "wallsectionaldoor", image=icon("wall/sectionaldoorfacelift")); text handling 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 interaction state default normal/pressed hover border color primary/p600 (#306b97) collapsible group 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