title: Spark buttons with embeded images
body: <p>I'm a Flex 4 noob so be patient...</p>
  
  <p>I want to do something like:</p>
  
  <p>Main.mxml</p>
  
  <pre><code>&lt;s:HGroup id="animals"&gt;
  
      &lt;s:Button name="dog"&gt;Dog Name&lt;/s:Button&gt;
      &lt;s:Button name="bird"&gt;Bird Name&lt;/s:Button&gt;
      &lt;s:Button name="cat"&gt;Cat Name&lt;/s:Button&gt;
  
  &lt;/s:HGroup&gt;
  </code></pre>
  
  <p>Skin for #animals s|Button</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="40" minHeight="22"&gt;
  
      &lt;fx:Metadata&gt;
         [HostComponent("spark.components.Button")]
      &lt;/fx:Metadata&gt;
  
      &lt;s:states&gt;
          &lt;s:State name="up" /&gt;
          &lt;s:State name="over" /&gt;
          &lt;s:State name="down" /&gt;
          &lt;s:State name="disabled" /&gt;
      &lt;/s:states&gt;
  
      &lt;s:BitmapImage width="104" height="54" source="@Embed('../../assets/img/animals/__PUT_HERE_BUTTON_NAME__.png')"/&gt;
  
      &lt;s:Label
      id="labelDisplay"
      textAlign="center"
      color="0xffffff"
      fontFamily="CuteFont"
      fontWeight="bold"
      fontSize="15"
      width="100%"
      top="64"
      /&gt;
  &lt;/s:Skin&gt;
  </code></pre>
  
  <p>Do I have to extend the Button component or how should I proceed?</p>