The box element is used to group controls together. Its align attribute decides if these controls go from left to right ("horizontal") or top to bottom ("vertical"). With titledbutton element highly customizable buttons can be created. The value attribute sets the text for the button. The picture can be specify either by src attribute or by setting list-style-image property in CSS.

Click on the top row buttons will change the appearance of AAA button. The alignattribute governs the mutual position of the picture and the text. The oncommand attribute is used in the same way as with menuitem to specify some action.

<?xml-stylesheet href="css1.css" type="text/css" title="css1"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <box align="horizontal">
     <titledbutton value="R" align="right" src="chrome://related/skin/sitemap.gif"
               oncommand="document.getElementById('a').setAttribute('align','right')"/>
     <titledbutton value="L" align="left" src="chrome://related/skin/sitemap.gif"
               oncommand="document.getElementById('a').setAttribute('align','left')"/>
     <titledbutton value="B" align="bottom" src="chrome://related/skin/sitemap.gif"
               oncommand="document.getElementById('a').setAttribute('align','bottom')"/>
           <titledbutton value="T" align="top" src="chrome://related/skin/sitemap.gif"
               oncommand="document.getElementById('a').setAttribute('align','top')"/>
     </box>
     <box class="vertical" align="vertical">
           <titledbutton id="a" value="AAA" align="bottom" src="chrome://messenger/skin/folder.gif"/>
           <titledbutton value="BBB" align="right" src="chrome://messenger/skin/folder-open.gif"/>
           <titledbutton value="CCC" align="right" src="chrome://messenger/skin/folder-new.gif"/>
     </box>
</window>

xul2.xul

Toggled attribute

<?xml-stylesheet href="css2.css" type="text/css" title="css1"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
align="vertical" >
     <box align="horizontal">
     <titledbutton value="folder" toggled="1"/>
     </box>
</window>

css1.css

All properties are specified in this CSS

window {background-color:yellow}
box {background-color:#FFFFCC}
box.vertical {background-color:#CCFFCC}
titledbutton {color:blue; font-weight:bold; margin:5px; padding:3px; border:solid blue}
titledbutton:hover {color:red; border:solid red}
titledbutton:active {color:purple; border:solid purple}

css2.css

All properties are specified in this CSS

window {background-color:yellow}
box {background-color:#FFFFCC}
titledbutton {color:navy; font-weight:bold; margin:5px; padding:3px;border: solid #FFFFCC}
titledbutton {list-style-image: url("chrome://messenger/skin/folder.gif");}
titledbutton:hover {border: solid red}
titledbutton:active {list-style-image: url("chrome://messenger/skin/folder-open.gif");}