System Button

A button consists of text and/or an image that clearly communicates what action will occur when the user touches it. The two main types of buttons used are Process buttons, and Ancillary buttons.

System Button

System Button

Specs

Font, Color and Usage:

• Action background fill: Concur Blue (#0078C8)
• System Button: 359 wide, 44 tall, 4 radius
• System Button: 8 padding
• Title Alignment: centerX, centerY
• Title: SF UI Text, 17 points, White (#FFFFFF)

Single Action with Price

Specs

Font, Color and Usage:

• Action background fill: Concur Blue (#0078C8)
• Optional background fill: Orange (#EF812D)
• System Button: 359 wide, 44 tall, 4 radius
• System Button: 8 padding
• Title: 26 Right, centerY
• Title: SF UI Text, 17 points, White (#FFFFFF)
• Price background stroke: 1pt, White (#FFFFFF)
• Price background padding: 5 Top & Bottom, 8 Left & Right
• Price: SF UI Text, 17 points, White (#FFFFFF)

Usage

The Action Button is used mainly when the action taken is the final step in a process (i.e. submitting an expense or booking a hotel). However, the Action Button may also be used for ancillary actions such as the Next button navigating to a new screen in the Walkthrough steps.

When an action button is tapped if there are required fields that have not been filled out, a toast should be shown indicating that there are required fields be filled out, and the screen will scroll to the fields in question. If there are mulitiple required fields yet to be filled out, scroll to the topmost one.