One key feature of Play’s components is their ability to have multiple states that look and behave differently. Each state has the same structure of objects, but you can adjust the properties of those objects across the states. For example, a button can be gray in the default state and blue in the selected State.

States are helpful for creating complex interactions that react to user input. Use the Set State action to animate between certain states or cycle through all states.

You might use states to represent variations of a component, such as “primary” and “secondary” buttons. You might also use states to represent the status of an interactive component, such as “pressed”, “disabled”, and “active”.

Components have four built-in states: Default, Selected, Highlighted, and Disabled. You can also create custom states.

Add a state by clicking on the pink drop-down menu in the component’s object toolbar and hovering over “New State.” From here, you can add any of the built-in states or a custom state by clicking on the desired one.

Tap the component name to open the state list. Add a built-in state by tapping the desired state in the states panel. Add a custom state by tapping the plus sign under “Custom States.”

The default state will almost always be your base state. There is a built-in interaction (Toggle Tap trigger + Set State action) between the default and selected states. So, if you’re making a button, you’ll just create your states, and once you’re in Play Mode, tapping the button will switch the states automatically!

The highlighted state will automatically trigger when a user touches down on the component. The component will revert back to default when the user touches up.

Any edits you make to any states of the main component will affect the states of all instances.

When you add an object to your component when you have multiple existing states, all states will inherit the object's properties from the Default state. You can create overrides on the other states.

Every instance has the same states as the main component, but you can override the properties of any state on any instance.

You can add a state from an instance, and it will automatically be added to the main component. Every instance will have access to the new state.

Likewise, if you delete a state from an instance, that state will also be deleted from the main component and any other instances.