Skip to main content
Version: 7.9

2 State Toggle

Component Palette Icon

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. If you have more than two states (for example, Hand/Off/Auto, use the Multi-State Button).

If you have a tag whose value you want to toggle between 2 values (like zero and one), you can simply drag and drop the tag onto the button. This will bind both the Control Value and Indicator Value properties to that tag. Now set the State 1 Value and State 2 Value to your two states (they default to zero and one, respectively). Lastly, use the Styles Customizer to define the styles for your two states.

This button has four integer values that you use to set it up: the Control Value, the Indicator Value, and values that define the 2 different states: State 1 Value and State 2 Value. Every time you press the button, one of the state values is written to the control value. The Indicator Value is used to determine which state you're in. For example, suppose that State 1 Value was zero and State 2 Value is one. If Indicator Value is zero and you press the button, it'll write a one to the Control Value. This means that if the Indicator value never changes, the button will continue to write the same value to the Control Value. The Style of the component is typically driven by the read-only property Current State. Current State equals zero when Indicator Value=State 1 Value and one otherwise.


NameDescriptionProperty TypeScriptingCategory
AntialiasDraw with antialias on? Makes text smoother.boolean.antialiasAppearance
Background 3D?Should this button have a 3d type background, or a flat color one?boolean.background3DAppearance
Background ColorThe background color of the button.Color.buttonBGAppearance
BorderThe border surrounding this component. NOTE that the border is unaffected by rotation.Border.borderCommon
Border Painted?Should the border of this button be displayed?boolean.borderPaintedAppearance
Confirm TextThe message to ask the user if confirmation is turned on.String.confirmTextBehavior
Confirm?If true, a confirmation box will be shown.boolean.confirmBehavior
Control ValueBind this to the tag that controls the state. (Typically, this is bound to the same location as Indicator Value).int.controlValueData
Current StateRead-only property that shows what state (0 or 1) this button is currently
CursorThe mouse cursor to use when hovering over this
Data QualityThe data quality code for any tag bindings on this
Disabled Image PathThe relative path of the image to be displayed when this component is not enabled.String.disabledPathAppearance
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
Fill Area?Controls whether or not this button's internal area is filled.boolean.contentAreaFilledAppearance
FocusableIf a button is not focusable, you will not be able to interact with it with the keyboard. This means you can't "tab" over to it.boolean.focusableBehavior
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe foreground color of the component.Color.foregroundAppearance
Horizontal AlignmentThe horizontal alignment of the button's contents (text and/or image)int.horizontalAlignmentLayout
Horizontal Text PositionThe horizontal position of the button's text relative to its
Icon-Text SpacingThe space (in pixels) between the icon (if any) and the text (if any).int.iconTextGapAppearance
Image PathThe relative path of the image.String.pathAppearance
Indicator ValueBind 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.indicatorValueData
MarginThe space between a button's text and its borders.Insets.marginLayout
MnemonicA single letter that will activate the button using 'ALT-mnemonic'.String.mnemonicCharBehavior
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
OpaqueIs this button completely opaque? Most aren't, so this should usually be false.boolean.opaqueCommon
RolloverIf true, the button may indicate that the mouse is hovering over it.boolean.rolloverEnabledBehavior
State 1 ValueThe value that will be written to controlValue when the button is pushed in state
State 2 ValueThe value that will be written to controlValue when the button is pushed in state
StylesContains the component's styles.Dataset.stylesAppearance
TextText of this component.String.textAppearance
Vertical AlignmentThe vertical alignment of the button's contents (text and/or image).int.verticalAlignmentLayout
Vertical Text PositionThe vertical position of the button's text relative to its
VisibleIf disabled, the component will be hidden.boolean.visibleCommon


Scripting Functions

This component does not have scripting 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 page



2-State Toggle with Styles Configured

Property NameValue