User Guide

Button component 133
Customizing the Button component
You can transform a Button component horizontally and vertically while authoring and at
runtime. While authoring, select the component on the Stage and use the Free Transform tool or
any of the Modify > Transform commands. At runtime, use the
setSize() method (see
UIObject.setSize()) or any applicable properties and methods of the Button class (see “Button
class” on page 139). Resizing the button does not change the size of the icon or label.
The bounding box of a Button instance is invisible and also designates the hit area for the
instance. If you increase the size of the instance, you also increase the size of the hit area. If the
bounding box is too small to fit the label, the label is clipped to fit.
If an icon is larger than the button, the icon extends beyond the buttons borders.
Using styles with the Button component
You can set style properties to change the appearance of a button instance. If the name of a style
property ends in “Color”, it is a color style property and behaves differently than noncolor style
properties. For more information, see “Using styles to customize component color and text
on page 67.
A Button component supports the following styles:
Style Theme Description
themeColor
Halo The base color scheme of a component. Possible values are
"haloGreen", "haloBlue", and "haloOrange". The default value
is
"haloGreen".
backgroundColor
Sample The background color. The default value is 0xEFEBEF (light
gray).
The Halo theme uses 0xF8F8F8 (very light gray) for the
button background color when the button is up and
themeColor when the button is pressed. You can only modify
the up background color in the Halo theme by skinning the
button. See “Using skins with the Button component”
on page 134.
border styles
Sample The Button component uses a RectBorder instance as its
border in the Sample theme and responds to the styles
defined on that class. See “RectBorder class” on page 647.
With the Halo theme, the Button component uses a custom
rounded border whose colors cannot be modified except for
themeColor.
color
Both The text color. The default value is 0x0B333C for the Halo
theme and blank for the Sample theme.
disabledColor
Both The color for text when the component is disabled. The default
color is 0x848384 (dark gray).