Skinning a Spark Button in Flex 4

The more I work with Flex 4, the more I understand why certain choices were made regarding the new component architecture, especially in regard to skinning. I stumbled, at first, as the skinning model is quite different and can appear much more cumbersome at first glance. Like most Flex devs, I was used to just modifying the CSS to style Halo components quickly and easily. The Spark model is more complex- but holds a lot more power as demonstrated below.

How to turn this button…

Into This button…

The only difference being the addition of the CustomButton skin class:

         * @copy spark.skins.spark.ApplicationSkin#hostComponent



As you can see, you can pretty much use any sort of visual wizardry you like in here: Solids, Gradients, Bitmaps, Strokes, what-ever!

Super easy to get started too, as you can have Flash Builder duplicate an existing skin to get you started. Just rename and recode. Once within the new skin, you can use the Appearance panel to modify things as you would through Halo (CSS styling) in previous versions of Flex, or get into the nitty-gritty as I’ve done here.



  1. For buttons which has an icon associated with it, this skinning behaves wierd, the label display of the buttons is not appropriate

  2. Hi Ely, for what it’s worth…
    I find it impossible to read your code examples on a black background with red, blue and green text. The only time i spent on your website was writing this comment. I’m sure the content is useful, but short of sticking my face up to the monitor with a magnifying glass, it’s completely un readable.

    1. Hi declan. I’m not Ely, but I did fix the coloring. Some of these older posts were using a different WP plugin for syntax. Apologies for causing so much inconvenience… :/

Leave a Reply

Your email address will not be published. Required fields are marked *