XUL Programmer's Reference Manual

<button />

Attributes Common Children
value * * *
class  
onclick  
oncommand  
id  
tooltip  
default  
disabled  
toggled  
src  
crop  

 
 
value
Description
value is a required attribute used to provide a label for the button.
Syntax
<button value="string" />
Example
<button id="pushme" class="push" value="Push Me" />
Notes
It is legal not to provide a value for a button, but the button may be invisible if there is not value to constrain the size of the actual button and no styling information that specifies its position and size.

 

 
class
Description
class is an attribute that specifies the style and alignment of a button
Syntax
<button class="class in global/button.css or custom css file" />
Example
<button id="pushme" class="left" value="Push Me" />
Notes
The most common classes from the global skin are:
  • button.small
  • button.left
  • button.right
  • button.top
  • button.bottom

 

 
onclick
Description
onclick is an event listener attribute used for adding functionality to XUL buttons. 
Syntax
<button onclick="javascript statements or javascript function call"
Example
<button value="Print" id="print" onclick="alert('Printing Document'); Print();" />
Notes
The onclick event listener is a way to invoke commands from buttons. Note that oncommand is the preferred way to attach an event handler to a button. onclick is deprecated, though still available.

The click event is fired whenever the user clicks the button. You can put the JavaScript inline with the event listener, you can call JavaScript functions defined in the <head> section of the XUL file in a <html:script>...</html:script> element, of you can call JavaScript functions defined in a separate source file which is loaded with the <html:script language="javascript" src="source_file_name.js" /> construction.

 
 
 
oncommand
Description
oncommand is an event listener attribute used for adding functionality to XUL buttons. 
Syntax
<button oncommand="javascript statements or javascript function call"
Example
<button value="Print" id="print" oncommand="alert('Printing Document'); Print();" />
Notes
The oncommand event listener is a common way to invoke commands from buttons. It replaces onclick as the primary way to attach an event handler to a titlebutton.

You can put the JavaScript inline with the event listener, you can call JavaScript functions defined in the <head> section of the XUL file in a <html:script>...</html:script> element, of you can call JavaScript functions defined in a separate source file which is loaded with the <html:script language="javascript" src="source_file_name.js" /> construction.


 
tooltiptext
Description
tooltiptext is an optional attribute used to specify tooltip text for the button.
Syntax
<button tooltiptext="string" />
Example
<button id="send_mail" class="push" tooltiptext="Send Mail (Ctrl + M)" />
Notes
If you want to display longer or structured text within the tooltip window, you must use the tooltip attribute instead

 
 

 
default
Description
default is an optional attribute used to specify which button in a group is the default.
Syntax
<button default="true | false" />
Example
<button id="quit" default="true" />
Notes
None.
 
disabled
Description
disabled is an optional attribute used to gray out buttons that are disabled.
Syntax
<button disabled="true | false" />
Example
<button id="new" class="push" disabled="true" />
Notes
You can use JavaScript to check this attribute and determine whether a given operaton is enabled or not, as in the following example:
 
XXX insert HelpBack() function example here. XXX


 
toggled
Description
toggled is an optional attribute used to specify the toggle state of a button.
Syntax
<button toggled="0 | 1 | 2" />
Example
<button id="local" class="push" toggled="1" />
Notes
0 means that toggling is off, 1 means that it's on, and 2 means that the toggling is mixed.

 

 
src
Description
src is an optional attribute for loading button images.
Syntax
<button src="URL" />
Example
<button id="security" src="images\lock_and_key.gif" />
Notes
None.

 

 
crop
Description
crop is an optional attribute for specifying which part of a button's text, if any, will be cropped if it is too large.
Syntax
<button id="string" value="Button Name" crop="left | right | none | center" >
Example
<button id="string" value="Very Long Button Name" crop="none" >
Notes
None.

 

Last updated: 3/27/00 Ian Oeschger