Skinning a button in Flex through document states

I came across this piece of code and it intrigued me. I haven't seen skinning like this before. I'd like to know if there are any downsides and alternatives to it. For example, is it cpu intensive like addChild calls are?

<s:Button id="loginoutBtn" right="10" top="10" label="Log out" label.loggedout="Log in" skinClass.loggedin="skins.FBLogoutButtonSkin" skinClass.loggedout="skins.FBLoginButtonSkin" click.loggedin="logout()" click.loggedout="login()"/>

Background: The button above is part of a Login example. I've worked with skinning a lot but the process has almost always resulted in a new component to go with the new skin. Also, would a ToggleButton but a good use case for the above?

A better question would be if you had to have a login and logout button in the x y location how would you do it?

I think in this case I'd have two buttons set to their relevant skins and a includeIn for each, so,

<s:Button id="loginBtn" includeIn="loggedIn" right="10" top="10" skinClass="skins.FBLoginButtonSkin" click="login()"/>

<s:Button id="logoutBtn" includeIn="loggedOut" right="10" top="10" skinClass="skins.FBLogoutButtonSkin" click="logout()" />

Solution

In this particular case I would go for the ToggleButton with a custom skin.

Why?

Only one custom skin required instead of two
Cleaner code in the 'host' component: no two Buttons required or a bunch of state-related attributes; just 'selected' needs to be bound to the state.
Since you've asked: probably the less CPU-intensive option (because A. there is only one Button and B. there is only one skin). But to be honest I think it really doesn't matter anyway: the performance of a single Button really isn't relevant.

<s:ToggleButton id="loginBtn" selected.loggedin="true" selected.loggedout="false"
                skinClass="skins.FBLoginToggleButtonSkin" 
                click="logInOrOut(loginBtn.selected)" />

note: the two labels would be defined inside the custom ToggleButtonSkin:

<s:Label text="log in" text.selectedStates="log out" />