Creating a custom label function on a Flex ButtonBar control

The following example shows how you can use a custom label function to create button labels on a ButtonBar control in Flex by setting the labelFunction property.

Full code after the jump.


<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""

            import mx.controls.ButtonBar;

            private var buttonBarXML:XML = describeType(ButtonBar);

            private function buttonBar_labelFunc(item:Object):String {
                var cat:String = item.category.toUpperCase();
                var len:uint = buttonBarXML.factory.child(;
                return cat + " (" + len + ")";

    <mx:Array id="arr">
        <mx:Object category="Accessors" data="accessor" />
        <mx:Object category="Methods" data="method" />

    <mx:ButtonBar id="buttonBar"
            labelFunction="buttonBar_labelFunc" />


View source is enabled in the following example.

2 thoughts on “Creating a custom label function on a Flex ButtonBar control

  1. Great example – thanks.
    Is it possible to style the text?. In your example, “METHODS (91)”. Can the “91” be styled red, or bold, and the text “METHOD” would be left the way it is.


    1. @Brad,

      I believe the Button label only supports single style formatted text and not HTML formatted text. Although there may be a way to set the htmlText property using ActionScript or by creating a custom skin or something.


Comments are closed.