Positioning an icon within a button using the Button.labelPlacement property

Probably not too surprising to anybody, but you can easily control the location of an icon within a Button control by setting the button’s labelPlacement property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.ButtonLabelPlacement;

            [Bindable]
            [Embed('assets/flex_icon.gif')]
            private var Icon:Class;
        ]]>
    </mx:Script>

    <mx:Label text="Button.labelPlacement" />
    <mx:HBox>
        <mx:Button id="bLeft"
                width="120" height="100"
                icon="{Icon}"
                labelPlacement="{bLeft.label}"
                label="{ButtonLabelPlacement.LEFT}" />

        <mx:Button id="bRight"
                width="120" height="100"
                icon="{Icon}"
                labelPlacement="{bRight.label}"
                label="{ButtonLabelPlacement.RIGHT}" />

        <mx:Button id="bTop"
                width="120" height="100"
                icon="{Icon}"
                labelPlacement="{bTop.label}"
                label="{ButtonLabelPlacement.TOP}" />

        <mx:Button id="bBottom"
                width="120" height="100"
                icon="{Icon}"
                labelPlacement="{bBottom.label}"
                label="{ButtonLabelPlacement.BOTTOM}"/>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: labelPlacement