<?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();" viewSourceURL="srcview/index.html">

	<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>