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