An image button contains an image or icon, appears in a view, and initiates an instantaneous app-specific action. An image button has no border and can be configured to behave as a push button, toggle, or pop-up button.
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 when 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.