All the buttons have the `yui3-button` CSS className.
The first three sets are toggle buttons and are marked as such by the `yui3-button-toggle`
CSS className.
` tag with a suitable legend.
The first two such groups are mutually exclusive sets, as signaled by the `yui3-button-group-exclusive`
CSS className. The third group, though it contains toggle buttons, does not force them to be exclusive
of one another.
A couple of buttons are marked with the `yui3-button-selected` CSS className and show
in their pressed state.
The first group will get a button selected after a couple of seconds of loading.
This was done via code, not markup, as shown below.
```
{{>button-group-code}}
```
The code for this page calls the static `Y.ButtonPlugin.addToggles` method
to attach the plugin to any suitable marked element within the element
passed to it..
To show how to select a button within a group via code, after a delay of two seconds
using the `window.setTimeout` function, the second button on the first set was selected
by giving the CSS selector for it.
Listeners for all buttons are set via delegation. In the first two cases,
the button clicked and the resulting selected button (it can be none) is shown
in the log console. You might either loop through all buttons to find which one
has the `selected` attribute set or simply ask the group container for a reference
to the selected element, as done in this example.
For the third group, since they are not mutually exclusive, all the buttons
with the `selected` attribute set are listed.
For the final group, there is no selection at all since they are regular buttons,
the click is simply reported