L'élément box est employé pour grouper des commandes ensemble. Son attribut align indique si ces commandes s'éxécutent de gauche à droite ("horizontal") ou de haut en bas ("vertical"). Avec l'élément titledbutton, des boutons fortement personnables peuvent être créés. L'attribut value définit le texte pour le bouton. L'image peut être spécifiée par un attribut src ou en plaçant la propriété list-style-image dans le fichier CSS.

Un clic sur les boutons supérieurs va modifer l'apparence du bouton AAA . L'attribut align régit à la fois la position de l'image et du texte. L'attribut oncommand est utilisé de la même façon qu'avec les items de menu pour spécifier une 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

Toutes les propriétés sont spécifiées dans les 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

Toutes les propriétés sont spécifiées dans les 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");}