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>

2 thoughts on “Changing the default skins on a Button control in Flex

  1. Hi Peter,

    i want to put the close button (the “x” on the upper right ) outside the window AND change the appearance of it (bigger, or a complete other design).

    Is that possible…?

    Thank you,
    regards
    Michael

Comments are closed.