---
title: "Perspective - Multi-State Button"
description: "The Multi-State Button is really a series of two or more buttons, arranged in a column or row."
---

# Perspective - Multi-State Button

> The Multi-State Button is really a series of two or more buttons, arranged in a column or row.

![](img1.png)

**Component Palette Icon**:  

![](img2.png)

## Description

The Multi-State Button is really a series of two or more buttons, arranged in a column or row. Each button represents an integer-valued state. Each state defines two styles for a button: the selected style, and the unselected style. Each button is automatically displayed with the correct style based on the current state (the value of Indicator Value). When a button is pressed, its state's value is written to the Control Value. 

When the Multi-State Button is dragged to a container, it is pre-configured with 'defaultSelectedStyle' and 'defaultUnselectedStyle properties'. These styles can be changed or deleted.

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) page.

| Name                   | Description     | Property Type      |
| ---------------------- | --------------- | ------------------ |
| controlValue           | Bind this to the Tag that controls the state. (Typically, this is bound to the same location as the indicatorValue property.)     | value: numeric|
| indicatorValue         | Bind this to the Tag that indicates the current state. (Typically, this is bound to the same location as the controlValue property).   | value: numeric |
| states  | The value that will be written to **controlValue** when any of the buttons are clicked. Shows a list of the possible states for the component. You can add, remove, and the change the order of each state listed. Each state has two default visual styles applied for each button: Selected Style and Unselected Style. The Multi-State Button has default visual styles defined for both the selectedStyle and unselectedStyle. (Refer to 'defaultSelectedStyle' and 'defaultUnselectedStyle' properties in this table).**text**: Text displayed on the button.	Value is string.**value**: Value assigned to the state. Value is numeric.**selectedStyle**: Style settings for the button when it is selected. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**unselectedStyle**: Style settings for the button when it is not selected. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).**tooltipText**: Determines what test should appear when mouse cursor hovers over the button associated with this property. If blank, no tooltip will appear. Value is string.  **Note**: This property is not present by default, and must be added manually.  | object             |
| orientation    | Physical position of the button: Column or Row.   | boolean            |
| defaultSelectedStyle   | Default selected style. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object             |
| defaultUnselectedStyle | Default styles for unselectedStyles when any of the buttons are _not_ selected. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object             |
| primary                | Toggles between the default primary and secondary button style.  | value: boolean    |
| enabled                | If true, the user is able to interact with the buttons.  | value: boolean    |
| buttonGap              | Space, in pixels, between each button in a group.    | value: numeric     |
| endButtonCornerRadius  | Amount to round the end of the corners of the first and last button.    | value: numeric     |
| style                  | Sets a style for this component. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md).| object             |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Examples

![](img3.png)

| Property                                     | Value              |
| -------------------------------------------- | ------------------ |
| props.indicatorValue                         | (property binding) |
| props.states.0.text                          | Open               |
| props.states.0.value                         | 2                  |
| props.states.0.selectedStyle.backgroundColor | #FFF809            |
| props.states.1.text                          | Close              |
| props.states.1.value                         | 0                  |
| props.states.1.selectedStyle.backgroundColor | #FF8C00            |
| props.states.2.text                          | Auto               |
| props.states.2.value                         | 1                  |
| props.states.2.selectedStyle.backgroundColor | #62ED2A            |
| props.states.3.text                          | Bypass             |
| props.states.3.value                         | 4                  |
| props.states.3.selectedStyle.backgroundColor | #FF0000            |
| props.orientation                            | row                |
| props.buttonGap                              | 8                  |
| props.endButtonCornerRadius                  | 2                  |