Changing the padding on a Button control in Flex

The following example shows how you can modify the padding between the Button control’s label and icon and the button’s edges by setting the paddingLeft, paddingRight, paddingTop, paddingBottom, and horizontalGap styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-padding-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        HSlider {
            labelOffset: 0;
            dataTipPlacement: right;
        }

        .iconButton {
            icon: Embed("bullet_picture.png");
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                leftSlider.value = button.getStyle("paddingLeft");
                rightSlider.value = button.getStyle("paddingRight");
                topSlider.value = button.getStyle("paddingTop");
                bottomSlider.value = button.getStyle("paddingBottom");
                horizontalGapSlider.value = button.getStyle("horizontalGap");
            }

            private function updatePadding():void {
                button.setStyle("paddingLeft", leftSlider.value);
                button.setStyle("paddingRight", rightSlider.value);
                button.setStyle("paddingTop", topSlider.value);
                button.setStyle("paddingBottom", bottomSlider.value);
                button.setStyle("horizontalGap", horizontalGapSlider.value);
            }
        ]]>
    </mx:Script>

    <mx:Array id="labelArr">
        <mx:Number>0</mx:Number>
        <mx:Number>4</mx:Number>
        <mx:Number>8</mx:Number>
        <mx:Number>12</mx:Number>
        <mx:Number>16</mx:Number>
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="paddingLeft:">
                <mx:HSlider id="leftSlider"
                        minimum="0"
                        maximum="16"
                        snapInterval="1"
                        labels="{labelArr}"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="paddingRight:">
                <mx:HSlider id="rightSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="paddingTop:">
                <mx:HSlider id="topSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="paddingBottom:">
                <mx:HSlider id="bottomSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
            <mx:FormItem label="horizontalGap:">
                <mx:HSlider id="horizontalGapSlider"
                        minimum="0"
                        maximum="16"
                        labels="{labelArr}"
                        snapInterval="1"
                        liveDragging="true"
                        showTrackHighlight="true"
                        change="updatePadding();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Button id="button" label="label" styleName="iconButton" />

</mx:Application>

View source is enabled in the following example.