     }
     
     /**
+     *  @private
+     *  CheckBox <code>chromeColor</code> is flat, no gradient.
+     */
+    override protected function beginChromeColorFill(chromeColorGraphics:Graphics):void
+    {
+        // solid color fill for selectable buttons
+        chromeColorGraphics.beginFill(getChromeColor());
+    }
+    
+    /**
      *  @private 
      */
     override protected function commitCurrentState():void
     {    
         super.commitCurrentState();
         
-        // Check for selected or not selected
+        // check for selected or not selected
         if (currentState != null)
         {
+            // if (currentState == "up" || currentState == "disabled")
             var currentStateIconClass:Class = upIconClass;
+            var currentSymbolClass:Class = upSymbolIconClass;
             var isSelected:Boolean = false;
             
             if (currentState == "down")
             {
                 currentStateIconClass = downIconClass;
-            }
-            else if (currentState == "upAndSelected")
+                currentSymbolClass = downSymbolIconClass;
+            }
+            else if ((currentState == "upAndSelected")
+                || (currentState == "disabledAndSelected"))
             {
                 currentStateIconClass = upSelectedIconClass;
+                currentSymbolClass = upSymbolIconSelectedClass;
                 isSelected = true;
             }
             else if (currentState == "downAndSelected")
             {
                 currentStateIconClass = downSelectedIconClass;
-                isSelected = true;
-            }
-            else if (currentState.indexOf("AndSelected") != -1)
-            {
-                currentStateIconClass = upSelectedIconClass;
+                currentSymbolClass = downSymbolIconSelectedClass;
                 isSelected = true;
             }
             

                ? DisplayObject(symbolIcon) : null;
            var hasSymbol:Boolean = (symbolObj) && contains(symbolObj);
            
            if (hasSymbol && !isSelected)
            {
                removeChild(DisplayObject(symbolObj));
                invalidateDisplayList();
            }
            else if (!hasSymbol && isSelected)
            {
                symbolIcon = new symbolIconClass();
                
                addChild(DisplayObject(symbolIcon));
                invalidateDisplayList();
            }
        }
    }

    /**
     *  @private 
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        graphics.clear();
        
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        
        // TODO (jszeto) Does this need to go into a seperate DisplayObject to avoid it from getting 

{
import flash.display.DisplayObject;
import flash.display.Graphics;

/**
 *  Actionscript based skin for toggle buttons. This class can not be used 
 *  by itself. You must subclass and specify a 
