Translations:UIX/23/en

1. Add a child to your canvas (or layout or whatever) and call it Button.
2. In that object, Attach Component > UIX > Graphics > Image. You can change the image's Tint to change the base color of the button.
3. Change the RectTransform's AnchorMin/Max to add a border around the button. This effectively tells the parent where the child is and how to scale it.
   • AnchorMin (x,y) is the lower left corner of a rectangle on the parent canvas that the child should be fit into, ranging from 0 to 1. (0,0) is the lower left of the parent.
   • AnchorMax (x,y) is the upper right corner of a rectangle on the parent canvas that the child should be fit into, ranging from 0 to 1. (1,1) is the upper right of the parent.
   • Adding a small border of, say, 5% of the parent's size, means the AnchorMin should be (0.05,0.05) (i.e. 0,0 plus 5%) and AnchorMax should be (0.95,0.95) (i.e. 1,1 minus 5%).
4. Attach Component > UIX > Interaction > Button. Based on the image's Tint, the button will automatically fill out the colors for its normal, highlight, press, and disabled states.
5. You may add text to the button:
   1. Create a child object of the button and call it Text.
   2. On that child, Attach Component > UIX > Graphics > Text.
   3. Change the text to what you want.
   4. Alter the font size, set up autosize, change the alignment to what you want.
6. You can hook the button up to LogiX by creating a Button Events node, dragging out the Button interface card, and hooking it up to the Button Events node.