---
title: "Vision - 2 State Toggle"
description: "This button is similar to the basic Toggle Button, but more finely tuned to work in realistic controls environments. Use this button any time you want to toggle a value between two states, such as On/Off, Stop/Run, etc."
---

# Vision - 2 State Toggle

> This button is similar to the basic Toggle Button, but more finely tuned to work in realistic controls environments. Use this button any time you want to toggle a value between two states, such as On/Off, Stop/Run, etc.

![](2statetoggle.png)

**Component Palette Icon**

![](2statetoggle1.png)

This button component will toggle a value between two states, such as On/Off, Stop/Run, etc. To toggle between more than two states, use the [Multi-State Button](appendix/components/vision-components/buttons/multi-state-button.md). 

## Properties
| Property 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Background Color 	| The background color of the button. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx). 	| Color 	| .buttonBG 	| Appearance 	|
| Border 	| The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.**Note**: The border is unaffected by rotation. As of 8.1.21, the "Button Border" and "Other Border" options are removed. 	| Border 	| .border 	| Common 	|
| Border Painted? 	| Indicates if the border of this button should be displayed.This property was removed in 8.1.8 	| boolean 	| .borderPainted 	| Appearance 	|
| Confirm Text 	| The message displayed in the confirmation box if Confirm? is true. 	| String 	| .confirmText 	| Behavior 	|
| Confirm? 	| If true, a confirmation box will be shown. 	| boolean 	| .confirm 	| Behavior 	|
| Control Value 	| Bind this to the tag that controls the state. (Typically, this is bound to the same location as Indicator Value). 	| int 	| .controlValue 	| Data 	|
| Current State 	| Read-only property that shows the button's current state (0 or 1) 	| int 	| .state 	| Data 	|
| Cursor 	| The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. 	| int 	| .cursorCode 	| Common 	|
| Disabled Image Path 	| The relative path of the image to be displayed when this component is not enabled. 	| String 	| .disabledPath 	| Appearance 	|
| Enabled 	| If disabled, a component cannot be used. 	| boolean 	| .componentEnabled 	| Common 	|
| Fill Area? 	| Controls whether or not this button's internal area is filled. 	| boolean 	| .contentAreaFilled 	| Appearance 	|
| Focusable 	| If a button is not focusable, you will not be able to interact with it with the keyboard. 	| boolean 	| .focusable 	| Behavior 	|
| Font 	| Font of text on this component. 	| Font 	| .font 	| Appearance 	|
| Foreground Color 	| The foreground color of the component. See [Color Selector](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx).	| Color 	| .foreground 	| Appearance 	|
| Horizontal Alignment 	| The horizontal alignment of the button's contents (text and/or image) 	| int 	| .horizontalAlignment 	| Layout 	|
| Horizontal Text Position 	| The horizontal position of the button's text relative to its image. 	| int 	| .horizontalTextPosition 	| Layout 	|
| Icon-Text Spacing 	| The space (in pixels) between the icon (if any) and the text (if any). 	| int 	| .iconTextGap 	| Appearance 	|
| Image Path 	| The relative path of the image. 	| String 	| .path 	| Appearance 	|
| Indicator Value 	| Bind this to the tag that indicates the current state. (If you don't have separate tags for status and control, this is bound to the same location as Control Value) 	| int 	| .indicatorValue 	| Data 	|
| Margin 	| The space between a button's text and its borders. 	| Insets 	| .margin 	| Layout 	|
| Mnemonic 	| A single letter that will activate the button using 'ALT-mnemonic'. 	| String 	| .mnemonicChar 	| Behavior 	|
| Mouseover Text 	| The text that is displayed in the tooltip which pops up on mouseover of this component. 	| String 	| .toolTipText 	| Common 	|
| Name 	| The name of this component. 	| String 	| .name 	| Common 	|
| Quality 	| The data quality code for any Tag bindings on this component. 	| QualityCode 	| .quality 	| Data 	|
| Rollover 	| If true, the button may indicate that the mouse is hovering over it. 	| boolean 	| .rolloverEnabled 	| Behavior 	|
| State 1 Value 	| The value that will be written to controlValue when the button is pushed in state 2. 	| int 	| .state1Value 	| Data 	|
| State 2 Value 	| The value that will be written to controlValue when the button is pushed in state 1. 	| int 	| .state2Value 	| Data 	|
| Styles 	| Contains the component's styles. 	| Dataset 	| .styles 	| Appearance 	|
| Text 	| Text of this component. 	| String 	| .text 	| Appearance 	|
| Vertical Alignment 	| The vertical alignment of the button's contents (text and/or image). 	| int 	| .verticalAlignment 	| Layout 	|
| Vertical Text Position 	| The vertical position of the button's text relative to its image. 	| int 	| .verticalTextPosition 	| Layout 	|
| Visible 	| If disabled, the component will be hidden. 	| boolean 	| .visible 	| Common 	|

### Deprecated Properties
| Property 	| Description 	| Property Type 	| Scripting 	| Category 	|
|---	|---	|---	|---	|---	|
| Data Quality 	| The data quality code for any Tag bindings on this component. 	| int 	| .dataQuality 	| Deprecated  	|
| Opaque 	| If true, button will be opaque. Default is false.	| boolean 	| .opaque 	| Common 	|

## Scripting

### Component Functions
This component does not have component functions associated with it.

### Extension Functions
This component does not have extension functions associated with it.

### Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the [Component Events](ignition-modules/vision/scripting-in-vision/component-events/component-events.md) page

## Customizers
+ [Vision Component Customizers](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md)
+ [Style Customizer](ignition-modules/vision/working-with-vision-components/vision-component-customizer/vision-component-customizer.md#style-customizer)

## Example

### 2-State Toggle with Styles Configured

![](two-state.png)

|Property Name|Dataset|
|:---|:---|
|Styles|![](two-state-style.png)|