Button

Performs an action when tapped by the user. These are highly flexible user interface objects that have a wide variety of styles. See the Coding guide for information on how to implement buttons that look like those described here.

Characteristics

Buttons have two components: a visual target and a hit target. The hit target is always larger, in order to reduce targeting errors by making the button easier to tap.

Buttons have two states: normal and pressed.

Buttons can also be disabled, which means they can't be activated by the user, and are displayed dimmed to indicate that they're disabled.

There are several types of buttons:

Action buttons

Used when there are only a few actions and a list isn't needed. The main action button uses a special highlight color to indicate that it's the primary option.

List buttons

Used when displaying a list of actions, or to trigger the display of a value selector.

Input field buttons

Used to perform actions with input fields.

Special/custom buttons

These are used to provide specific actions including recording, dialing, and the like.

Visuals

Here are some visual examples of what buttons should look like. Don't forget that you can use the style sheet and image resources provided in the Coding guide to implement these.

Action buttons

Action buttons are used when there are only a few actions and you don't need a full list. The main action button uses a special highlight color to indicate that it's the primary action.

Primary action

Secondary action

Delete

Normal

Pressed

Disabled

On a dark background, disabled buttons have a special appearance, as seen below.

Primary action

Secondary action

Disabled

List buttons

List buttons are used to display a list of actions, to trigger the display of a value selector.

Triggering actions

Trigger an action in the current view

Trigger an action in a new view

Display a value selector

Normal

Pressed

Disabled

Value selectors

Once a value selector has been opened, you will need at least one button on the value selector panel to dismiss the value selector. These buttons should look like the following:

Normal

Pressed

Disabled

Input field buttons

Input field buttons are buttons associated with an input field, which when pressed perform an action related to that input field.

Normal

Pressed

Disabled

Special buttons

The special buttons are visual icon-style buttons used for special purposes, such as operating the device's camera, answering and hanging up the phone, and activating the keypad dialer. You may of course find other uses for this style of button.

Camera buttons

These buttons don't have a disabled state; you simply don't display them if the ability to take photos isn't available.

Record video

Stop recording video

Capture photo

Normal

Pressed

Phone buttons

Pick up

Hang up

Hide keypad

Normal

Pressed

Disabled

Custom buttons

These are examples of custom buttons; in this case, for adding a contact.