Extending Flex buttons... can you help me?

**Edit - this has been solved thanks to the help of Marcus: view the entry here**

I never claimed to be a Flex expert... and this only proves why.

Back story: I am trying to extend a Flex button to be something I'm calling a legend button. Essentially it is a button that also doubles as a legend. When the toggle is on that line is on the chart, when the toggle is off that line is removed from the chart. The button 'color' and the line color have to match.

What I am currently trying to do: I am trying to extend the button component and add a Box (10pxx10px). What is happening however, is the box is showing up underneath the button itself, so when the button alpha is 100% (i.e. when toggle is on) you can't see the box.

Here's the code:

package com.view
{
 import flash.display.DisplayObject;
 import flash.events.MouseEvent;
 import flash.text.TextLineMetrics;
 
 import mx.containers.Box;
 import mx.controls.Button;
 import mx.core.UITextField;
 
 public class LegendButton extends Button
 {
  [Bindable] public var legendColor:uint;
  private var legendIcon:Box;
  
  public function LegendButton()
  {
   super();
  }
  
  override protected function createChildren():void
  {    
   if (!legendIcon)
   {
    legendIcon = new Box;
    legendIcon.styleName = this;
    legendIcon.setStyle('backgroundColor',legendColor);
    legendIcon.width = 10;
    legendIcon.height = 10;
    addChild(legendIcon);
   }
   
   if (!textField)
   {
    textField = new UITextField();
    textField.styleName = this;
    addChild(flash.display.DisplayObject(textField));
   }
   
   super.createChildren();
  }
  
  protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
  { 
   this.setStyle('paddingLeft',15);
   this.setStyle('paddingRight',5);
   
   legendIcon.move(5,5);
   
   super.updateDisplayList(unscaledWidth,unscaledHeight);
  }
  
  override protected function measure():void
  {
   if (!isNaN(explicitWidth))
   {
    var w:Number = explicitWidth;
    w -= getStyle('horizontalGap') + getStyle('paddingLeft') + getStyle('paddingRight');
    textField.width = w;
   }
   super.measure();
  }
  
  override public function measureText(s:String):TextLineMetrics
  {
   textField.text = s;
   var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
   lineMetrics.width = textField.textWidth + 4;
   lineMetrics.height = textField.textHeight + 4;
   return lineMetrics;
  } 
  
 }
}

Here's what they look like. Sad isn't it? :(