<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comp="*"
layout="horizontal"
width="100%" height="100%"
viewSourceURL="srcview/index.html"
>
<mx:Script>
<![CDATA[
[Bindable]
Embed"arrowRightIconNoButton.png")]
private var ArrowIcon:Class;
Bindable]
Embed"smiley.png")]
private var SmileyIcon:Class;
]]>
</mx:Script>
<mx:Style>
.tinyIconButton
{
icon-up-tint: #ff3333;
icon-over-tint: #111111;
icon-down-tint: #111111;
icon-disabled-tint: #d3d3d3;
icon-selected-up-tint: #e5e5e5;
icon-selected-over-tint: #e5e5e5;
icon-selected-down-tint: #e5e5e5;
icon-selected-disabled-tint: #e5e5e5;
color: #ff3333;
text-roll-over-color: #111111;
text-selected-color: #e5e5e5;
upSkin: ClassReference("ButtonSkin");
overSkin: ClassReference("ButtonSkin");
downSkin: ClassReference("ButtonSkin");
disabled-skin: ClassReference("ButtonSkin");
selected-up-skin: ClassReference("ButtonSkin");
selected-over-skin: ClassReference("ButtonSkin");
selected-down-skin: ClassReference("ButtonSkin");
selected-disabled-skin: ClassReference("ButtonSkin");
}
</mx:Style>
<comp:TintedIconButton
styleName="tinyIconButton"
buttonMode="true"
toggle="true"
icon="{ArrowIcon}"
label="Click the button"
/>
<comp:TintedIconButton
buttonMode="true"
toggle="true"
icon="{ArrowIcon}"
label="I want style!"
/>
<comp:TintedIconButton
styleName="tinyIconButton"
buttonMode="true"
icon="{SmileyIcon}"
label="I'm smiley!"
height="25"
/>
</mx:Application>