# Custom On/Off Button **URL:** \ **Category:** Ignition\ **Created:** [June 22, 2018, 10:52pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591 "2018-06-22T22:52:15Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![ddurant](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@ddurant](https://forum.inductiveautomation.com/u/ddurant)\ **Post date:** [June 22, 2018, 10:52pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/1 "2018-06-22T22:52:15Z")
I have two buttons that I got from the Symbol Factory: ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/901e9e9b58fc10778a407dd40423e7656cc5445b.png) I want to put one on top of the other so when you press it, it turns green or red. I see where you can add an image to a two-state toggle button using the Image Path property. However, it looks like those image types don’t include .svg files and I don’t see anyway to save the images in the Symbol Factory to my hard drive. Thanks, ---
**Author:** ![craigb](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@craigb](https://forum.inductiveautomation.com/u/craigb)\ **Post date:** [June 23, 2018, 1:28am UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/2 "2018-06-23T01:28:18Z")
Someone will probably point you in the right direction of the location folder. Another way is to google search and find more options. Other then that if your on windows use the sniping feature. Open them in your paint program of choice, remove the background and save as png. ---
**Author:** ![ddurant](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@ddurant](https://forum.inductiveautomation.com/u/ddurant)\ **Post date:** [July 6, 2018, 5:59pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/3 "2018-07-06T17:59:51Z")
There must be a way to do this. There are a ton of both built-in buttons and ones in the Symbol Factory. I can’t believe I’m stuck with a square button that just says on or off. If it’s too difficult to explain in a post, just point me in the right direction. Thanks ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [July 6, 2018, 6:20pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/4 "2018-07-06T18:20:32Z")
When you place a symbol from the factory in a window (or on a template), it isn’t one simple component. Drill down into it to locate the path/ellipse/shape that provides the colored insert, and bind the color property to your status bit one way or another. I recommend adding a custom boolean to that nested object and using the style customizer to change the color based on that bit. ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [July 6, 2018, 6:28pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/5 "2018-07-06T18:28:24Z")
As an alternative, you can group two symbols together, with a status bit as a custom property of the group. Toggle the visibility based on the status bit. If you’re doing this more than once, you can also make a custom component out of the group. ---
**Author:** ![ddurant](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@ddurant](https://forum.inductiveautomation.com/u/ddurant)\ **Post date:** [July 6, 2018, 7:11pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/6 "2018-07-06T19:11:38Z")
Thanks guys! I’ll let you know how it turns out. ---
**Author:** ![ddurant](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@ddurant](https://forum.inductiveautomation.com/u/ddurant)\ **Post date:** [July 6, 2018, 10:59pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/7 "2018-07-06T22:59:53Z")
So I grouped the two images together, created a boolean custom property for the group called Status but as a group there’s no style customizer so how do I tell it what to be if the value is 0 or 1? Do I have to script it? With a single component it’s pretty easy to change the color or make it visible or invisible. Once they’re grouped that goes away. I even tried tried setting a custom property for each component individually but once they were grouped, same problem. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [July 6, 2018, 11:17pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/8 "2018-07-06T23:17:04Z")
You have to use an `if()` expression binding on the elements’ color properties to supply the two different colors. ---
**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\ **Post date:** [July 6, 2018, 11:58pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/9 "2018-07-06T23:58:58Z")
> [@ddurant](#): > > So I grouped the two images together, created a boolean custom property for the group called Status Bind the `visible` property of each button to your `Status` property. Bind the one you want to show when `Status` is on directly to `Status` and bind the other one to _not_ `Status` via an expression binding: ```auto !{Root Container.Group Component Name.Status} ``` Adjust component path inside curly braces to match your component. ---
**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\ **Post date:** [July 7, 2018, 12:05am UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/10 "2018-07-07T00:05:58Z")
> [@ddurant](#): > > With a single component it's pretty easy to change the color or make it visible or invisible. Once they're grouped that goes away. Use the tree view to select components inside the group and access their properties. Or double-click on the group component to enter the group and then you can select individual components inside the group. Your group has properties, _and_ the individual components still have their properties inside the group. ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [July 7, 2018, 11:03am UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/11 "2018-07-07T11:03:02Z")
An example to illustrate: [SymbolFactory Button Example.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/dcf8807d0ace256f4911560d96fa3981a5df6cc4.proj) (31.2 KB) EDIT: Reworked them to have a separate write value and status value. ---
**Author:** ![ddurant](https://avatars.discourse-cdn.com/v4/letter/d/ccd318/32.png) [@ddurant](https://forum.inductiveautomation.com/u/ddurant)\ **Post date:** [July 7, 2018, 10:26pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/12 "2018-07-07T22:26:04Z")
I’m making progress. I loaded the sample project and setup my own Test button. I created the custom properties, Status and WriteVal just like in the ones that were there. However, I’m not clear on how the bindings are setup. If you can clarify that for me, I’d appreciate it. Here’s what mine looks like vs yours at the moment: ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/d0beeb660f422feb5e27700b4109a5d7ca655c0a.png) ---
**Author:** ![witman](https://avatars.discourse-cdn.com/v4/letter/w/d2c977/32.png) [@witman](https://forum.inductiveautomation.com/u/witman)\ **Post date:** [July 7, 2018, 10:57pm UTC](https://forum.inductiveautomation.com/t/custom-on-off-button/18591/13 "2018-07-07T22:57:26Z")
The chain links to the right of an item in that tree indicates it has one or more bound properties. The other symbol to the right of the top one indicates a script (right-click and choose Scripting to view/edit) . To view/edit/add property bindings, select a component in the tree and then look at the properties in the properties pane. Any bound properties are bold. Tap the button to the right of any property to add/view/change binding. Here’s some material on property bindings you may find helpful: [https://inductiveuniversity.com/video/search/?q=binding](https://inductiveuniversity.com/video/search/?q=binding) Consider starting here: [https://inductiveuniversity.com/video/property-binding/7.9](https://inductiveuniversity.com/video/property-binding/7.9)