Image Buttons

An image button appears in a view and displays an image or icon. It initiates an immediate, app-specific action. An image button has no border and can be configured to behave as a push button, toggle, or pop-up button.

Screenshot of an image button as used in Pages to show how an image will appear when applying styles.

Use an image button in a view, not a window frame. Image buttons aren’t intended for use within toolbars and status bars. If you need an image button in a toolbar, use a toolbar item. See Toolbars.

Disable the frame on an image button. The entire button should be clickable, not just the image portion.

Include about 10 pixels of padding between your image edges and the button edges. Even though the edges of an image button aren’t visible, they still define the clickable area for the button. Padding ensures that a user’s click registers even if it misses the image slightly.

Allow adequate spacing between image buttons and other controls. Provide enough of a buffer that the user won’t inadvertently click the button’s hidden frame when attempting to click another control.

Position a label, if there is one, below the image button. For related guidance, see Labels.

For developer guidance, see NSButton, NSButtonCell, and NSShadowlessSquareBezelStyle.