IOS Button

General Guidelines

Buttons are used primarily for actions. Some examples include Add, Save, Delete, Cancel etc. Do not use Buttons as navigational elements. Instead, use Links because it takes the user to a new page and is not associated with an action. Each page may have one to two primary buttons. Any remaining calls-to-action are represented as secondary buttons.

Voice and Tone

Buttons should be consolidated to a single word if possible to portray a specific action, like “Submit”. Make the call to action clear by leading with a strong verb that encourages action so the user can anticipate what will happen when they tap. Be consistent among multiple buttons of the same type to avoid any confusion between similar actions and to encourage a confident atmosphere for the user. Buttons should be scannable, so avoid using uncessary words and articles such as the, an, or a.

Usage

Variant Where and When
Primary For the primary, or most important call to action on the page
Secondary For secondary action(s) on the page
System Used in the navigation bars and toolbars
Ghost Use in dialogs where destructive actions or text links are needed
Swipe Action Used with interactive rows - revealed after swipe event
Fast Action Used in account details banner area
Inline smaller contextual buttons used within accordions

Placement

The primary button should be on the top, with the secondary or cancel button on the bottom with 10px margin between the two. Buttons in forms should be sticky to the bottom of the screen (or top of the keyboard if active). If a button is associated with a specific action located in a specific area on the page, then it should be located directly underneath the data/description corresponding to that action.

Variant Guidelines

State Where and When
Default The default state of the button when left alone on the screen
Highlighted When the user taps the button (before the finger lifts off)
Focused When the user utilizes accessibility gestures to navigate to a button without triggering a tap event
Selected When a touch event ends (touch up event)
Disabled Used when actions are not available to let the user know some additional action or information must first be collected

Do’s and Don’ts

Do place the primary action on the top when paired with a secondary action or cancel
Do lead with strong verbs that encourage action for the user

Where can I Find This?

You can find buttons in almost every Widget.

Buttons are elements that allow a users to take an action

Variants

Color and Typography

Variant Fill & Border Color Font
Primary
@brandPrimaryButtonColor Themeable - Demo color shown #23334E
15pt Themeable - Demo color shown #FFFFFF
Secondary
@brandSecondaryButtonColor #FFFFFF
@brandPrimaryButtonColor Themeable - Demo color shown #23334E
15pt Themeable - Demo color shown #23334E
System
@brandTitleFontColor Themeable - Demo color shown #FFFFFF
13pt Themeable - Demo color shown #FFFFFF
Swipe Action
@swipe-action-button-color-destructive Thunderbird
@swipe-action-button-color-actionable Steel Blue
@swipe-action-button-color-positive Forest Green
14pt #FFFFFF
Fast Action
@light-fast-action-button-color #FFFFFF
@dark-fast-action-button-color Mine Shaft
12pt #FFFFFF
12pt Mine Shaft
Inline
@brandPrimaryInlineButtonColor Themeable - Demo color shown #23334E
@brandSecondaryInlineButtonColor #FFFFFF
@brandSecondaryInlineButtonBorderColor Themeable - Demo color shown #23334E
14pt #FFFFFF
14pt Themeable - Demo color shown #333333

Spacing

Behavior