Using the default values for all attributes will simply produce extra space between adjacent controls, equal to the spacing attribute of the parent bar tag. The width attribute (or height if the parent bar is aligned left of right) can be define to increase the amount of space.

To display arbitrary graphics in a bar, just supply its URL for the icon attribute. By default, the control will resize the graphic proportionately to fit the space implied by the parent bar's size and padding attributes, but you can override this behavior by specifying width and/or height attributes.

There are two other attributes that specify graphics associated with buttons - overicon and disicon. The first is used when the mouse is over the control or its select attribute evaluates to true. The second is used when the control's disable attribute evaluates to true.

For the control to actually do something when clicked, its bind attribute must be specified. If the property supplied is more than a simple trigger like 'timeline.delete', the value attribute will probably also need to be defined. For instance, both a play and pause button would be bound to 'player.play' but with value attributes of '1' and '0' respectively. These values might also be used in the hide attribute condition, so each button is only displayed when its action is appropriate.