Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks
On This Page

Infrequently Used Controls

The controls described here are not generally recommended for use in modern macOS apps.

Bevel Button

A bevel button is a multipurpose button designed for use in the window-body area.

You can use bevel buttons singly (as a push button) or in groups (as a set of radio buttons or checkboxes). The Preview inspector window uses bevel buttons as push buttons that rotate and crop the current content.

image: ../Art/ct_bevbuttonexample.jpg

Bevel buttons are available in Interface Builder. To create one using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSRegularSquareBezelStyle as the argument. (To create a square-cornered bevel button, use NSShadowlessSquareBezelStyle as the argument for the setBezelStyle: method.)

Bevel buttons can have square or rounded corners. They can display text, icons, or other images. Bevel buttons can also display a single downward-pointing arrow in addition to text or an image, which indicates the presence of a pop-up menu.

Bevel buttons can behave like push buttons or can be grouped and used like radio buttons or checkboxes.

You can use a square-cornered bevel button when space is limited or when adjoining a set of bevel buttons.

If you use a bevel button as a push button, its label should be a verb or verb phrase that describes the action it performs. If you provide a set of bevel buttons to be used as radio buttons or checkboxes, you might label each with a noun that describes a setting or a value.

If you choose to display an icon or image instead of a text label, be sure the meaning of the image is clear and unambiguous. It’s recommended that you create an icon no larger than 32 x 32 pixels. Maintain a margin of between 5 and 15 pixels between the icon and the outer edges of the button. A button that contains both an icon and a label may need a margin around the edge that’s closer to 15 pixels than to 5 pixels. Use label font (10-point Lucida Grande Regular) for text labels.

image: ../Art/ct_bevelbutton.jpg

You can also use Interface Builder to add a pop-up menu to a bevel button. First, drag a pop-up button into your window then, in the Attributes pane of the inspector, change the type to Pull Down. Finally, in the same pane, change the style to Bevel (for a standard bevel button look) or Square (for a square-cornered bevel button look).

Round Button

A round button initiates an immediate action.

Round buttons are available in Interface Builder. To create one using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSCircularBezelStyle as the argument.

Round buttons contain images only, not text.

Don’t use a round button to create a Help button. If you provide onscreen help, use the standard Help button instead (to learn more about this control, see The Help Button).

Don’t use round buttons as radio buttons or as checkboxes. If you need to provide functionality of these types, use radio buttons (see Radio Buttons) or checkboxes (see Checkbox).

If you need to display a single letter in a round button you should treat the letter as an icon.

Icon Button

An icon button (or image button) is a freestanding icon that behaves like a push button in a window’s content area.

To create an icon button in Interface Builder, drag a bevel button or a square button into your window, add your icon, and deselect the Bordered checkbox in the Attributes pane of the inspector. To create an icon button using AppKit programming interfaces, use the setBezelStyle: method of NSButtonCell with NSShadowlessSquareBezelStyle as the argument.

An icon button does not have a visible rectangular edge around it. In other words, the entire button is clickable, not just the icon.

Avoid making the icon too big for the button. Even though the outer dimensions of an icon button are not visible, they determine the hit target area. In general, it works well to size the icon button so that you leave a margin of about 10 pixels all the way around an icon.

If you include a label, place it below the icon, as shown here in the Sound icon button. (Use the small system font for a label.)

image: ../Art/ct_iconasbutton.jpg

Avoid putting an icon button too close to other UI elements. Don’t forget that the entire button area is clickable (not just the icon). Use Interface Builder layout guides to help you see where the edges of an unbordered icon button are.

An icon button can also have a pop-up menu attached to it, which is indicated by the presence of a single downward-pointing arrow.

To create an icon button with a pop-up menu in Interface Builder, drag a pop-up button (that is, an NSPopUpButton object) into your window. Select the button and in the Attributes pane of the inspector, change its type to Pull Down. Finally, for a Rounded or Square Bevel Button, change the style to Square or Shadowless Square, respectively. For an icon button, it doesn’t matter which style you choose, but you must deselect the Bordered checkbox. Resize the button as needed.

An icon button with a menu can behave like a standard pop-up menu, in which the image on the button is the current selection, or like a menu title, in which the image on the button is always the same.

To learn more about bevel buttons, see Bevel Button.

Placard

A placard displays information at the bottom edge of a window.

image: ../Art/ct_placard1.jpg

Placards are not available in Interface Builder. To create one using AppKit programming interfaces, subclass NSScrollView.

Typically, placards are used in document windows as a way to enable quick modifications to the view of the contents—for example, to change the current page or the magnification. The most familiar use of the placard is as a pop-up menu placed at the bottom of a window, to the left of the horizontal scroll bar.

image: ../Art/ct_placard.jpg

Don’t add to the placard menu commands that affect the contents of the window in other ways. Instead, you should use an Action menu (for more information on Action menus, see Action Menu).