C H A P T E R 1 5

Controls

Push Button Specifications

Control sizes: Push buttons are available in regular, small, and mini sizes. The height of a push button is fixed for each size, but you specify the width, depending on the length of the label text you supply. If you don’t specify a wide enough button, the end caps clip the text.

Figure 15-9 OK and Cancel buttons

Label spacing and fonts: Push button label text should not have a shadow or any other effects on it, and it should be in the system font appropriate for the button size (these fonts are automatically supplied by Interface Builder):

■Regular size: System font.

■Small: Small system font.

■Mini: Mini system font.

Control spacing: Push buttons should be placed far enough from each other to allow the user to click a specific one easily. In particular, note that a push button that could lead to a potentially dangerous or destructive action (such as Delete) should be farther away from safe buttons than the distances recommended in this section (see “Dismissing Dialogs” (page 236) for more information).

■Regular size: Leave at least 12 pixels of space between buttons aligned horizontally or stacked vertically.

■Small: Leave at least 10 pixels of space between buttons aligned horizontally or stacked vertically.

■Mini: Leave at least 8 pixels of space between buttons aligned horizontally or stacked vertically.

Push Button Implementation

Push buttons are available in Interface Builder. To create one using Application Kit programming interfaces, create an NSButton object of type NSMomentaryPushInButton or NSMomentaryLightButton.

Icon Buttons

An icon button behaves like a bevel button, but it does not have a visible rectangular edge around it. In other words, the entire button is clickable, not just the icon. Figure 15-10 shows the icon buttons in the System Preferences window.

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.

C H A P T E R 1 5

Controls

Figure 15-10 Icon button examples

Icon buttons

Icon Button Usage

Typically, icon buttons are used to display clickable icons in a toolbar (as described in“Window-Frame Controls” (page 249), an icon button is one of three standard window-body controls you can use in a toolbar). If you want to use icon buttons in your toolbar, avoid mixing them with rectangular-style or capsule-style toolbar controls. Icon buttons should not be used in a bottom bar.

An icon button can have a pop-up menu attached. See “Icon Buttons and Bevel Buttons With Pop-Up Menus” (page 279) for more information about this usage.

Icon Button Contents and Labeling

Icon buttons contain icons; in addition, they can display a text label that users can choose to view. Icon buttons can also contain a single downward-pointing arrow, which indicates the presence of a pop-up menu.

Icon button labels should name a thing (such as Network or Accounts) or describe an action (such as Mask or Show Art). Remember that users can choose to view the icon without the label, so make sure the meaning of the icon is clear and unambiguous. See “Designing Icons for Icon Buttons” (page 149) for more information on designing attractive and useful toolbar icons.

Icon Button Specifications

Control sizes: The outer dimensions of an icon button are not visible, but they determine the hit target area. Typically, the outer dimensions of an icon button include a margin of about 10 pixels all the way around the icon and label.

Label spacing and fonts: Use the small system font for the labels. The text should be below the icon as shown in Figure 15-11.

262 Buttons

2008-06-09 | © 1992, 2001-2003, 2008 Apple Inc. All Rights Reserved.