Changing the default skins on a Button control in Flex

The following example shows how you can modify the default skins for the Flex Button control by setting the skin, upSkin, overSkin, downSkin, and disabledSkin styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button id="btn"
            label="Button"
            skin="{null}"
            upSkin="{null}"
            overSkin="mx.skins.halo.ButtonSkin"
            downSkin="mx.skins.halo.ButtonSkin"
            disabledSkin="mx.skins.halo.ButtonSkin"
            icon="@Embed('assets/Button.png')" />

</mx:Application>

View source is enabled in the following example.

You can also set the various button skin styles in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Button {
            skin: ClassReference(null);
            upSkin: ClassReference(null);
            overSkin: ClassReference("mx.skins.halo.ButtonSkin");
            downSkin: ClassReference("mx.skins.halo.ButtonSkin");
            disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
            icon: Embed("assets/Button.png");
        }
    </mx:Style>

    <mx:Button id="btn"
            label="Button" />

</mx:Application>

Or, you can set the button skin styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.skins.halo.ButtonSkin;

            [Embed("assets/Button.png")]
            private const buttonIcon:Class;

            private function init():void {
                btn.setStyle("skin", null);
                btn.setStyle("upSkin", null);
                btn.setStyle("overSkin", ButtonSkin);
                btn.setStyle("downSkin", ButtonSkin);
                btn.setStyle("disabledSkin", ButtonSkin);
                btn.setStyle("icon", buttonIcon);
            }
        ]]>
    </mx:Script>

    <mx:Button id="btn"
            label="Button"
            initialize="init();" />

</mx:Application>

Tagged as: disabledSkin, downSkin, overSkin, skin, upSkin