You are currently viewing a snapshot of taken on April 21, 2008. Most of this content is highly out of date (some pages haven't been updated since the project began in 1998) and exists for historical purposes only. If there are any pages on this archive site that you think should be added back to, please file a bug.


Feature Owner
Eric Vaughan

There are two types of buttons in XUL, normal buttons, and toolbar buttons. Both buttons have very similar attributes, except for a slight difference in rendering.

The button or toolbarbutton tag is used to insert a button into a XUL document.

The button's text string is specified using the label attribute.

<button label="Bookmarks"/>

The button's image can be described either using CSS or by using the image attribute. The attribute's value is the URL to use for the image.

<button image=""/>

If the image attribute is omitted, then the button will pick up its image from the list-style-image CSS property.

 <button class="folderButton"/>
CSS: .folderButton{ list-style-image: url(""); }

The image can be placed above, below, to the left, or to the right of a button's label. This can be accomplished by using the dir and orient attributes. The dir attribute specifies which side of the label the image will be on. If dir is set to normal, the image can be either to the left or above the label. If it is set to reverse, the image can be to the right or below the label. The orient attribute specifies whether the layout of the items inside the button is horizontal or vertical. Some examples:

<button label="Bookmarks" image="" dir="normal" orient="vertical"/>

This example will produce a button with a label of Bookmarks and the image bar.png above the label.

<button label="Bookmarks" image="" dir="reverse" orient="horizontal"/>

This example will produce a button with a label of Bookmarks and the image bar.png to the right of the label.

The button can be disabled by setting the disabled attribute on the button element. This attribute can be set and unset using the setAttribute and unsetAttribute AOM APIs.

When a button is clicked, it executes a command handler (in addition to the normal click handler). This can be set on the button using the oncommand attribute.

The button can be locked into a pressed state by setting the checked attribute on the button to a value of true. This attribute, when true, indicates that the button should appear in a depressed state.

The button's appearance is highly customizable using CSS. The button's rollover appearance can be set using the :hover pseudoclass. Its depressed look can be set using the :active pseudoclass.


Because the button's image can be specified in CSS, different style rules can contain different images for the button's various states. Buttons can therefore have rollover, depressed, and disabled images. Buttons can even animate when certain conditions are met by switching between animated and static images (e.g., the Netscape throbber has a style rule that switches to an animated gif when a busy attribute is set on the button element).

When a button's width is constrained, it can be made to crop its text string. The button's cropping style can be specified using an attribute. The attribute is called crop, and it has values of start, center, and end. For example, with crop="end", the string is truncated by removing characters on the right hand side of the string until the string fits inside the button. The button places ellipses (...) on the right of the string.