Before including states into your designs, you should carefully plan the interactions including the necessary components, states, actions, and visibility settings.

For example, suppose you want to create a popup involving a Button component and a Container component. When the Button is clicked, the Container appears and when the Container is clicked, it is hidden. This is one of the simplest interactions because it involves just two components, one state, and three property settings.

The diagram below illustrates the components, actions, and visibility for the specified interaction. The on-click action and image visibility are controlled by a state named Popup, which has two values: Off and On. The steps required to configure the state and the components are described in the next few sections.