YUI ButtonGroup Notes

Some tips and things to check if your YUI ButtonGroup isn't behaving as you wish it would.

  • Double-check your <body> tag has class="yui-skin-sam"

  • Unlike in the documentation example, you can't just put a call to YAHOO.widget.ButtonGroup pointing to your div anywhere in your HTML and expect it to work. You've got to wait for it to be ready with something like:

    <script type="text/javascript">
    YAHOO.util.Event.onContentReady("my_button_div", function() {
      var oButtonGroup = new YAHOO.widget.ButtonGroup("my_button_div");
  • You can easily get an image in each button. For example, if your button is defined as:

    <span id="my-button-id" class="yui-button yui-radio-button yui-button-checked">
     <span class="first-child">
       <button type="button" hidefocus="true"></button>

    Simply add a CSS class something like:

    .yui-button#my-button-id button { background:url(http://server/image.jpg) 50% 50% no-repeat; }

Hopefully, this will save someone else a few hours!