Buttons
FUIButton
Intro
A button communicates the action that it is going to initiate. Users can tap a button to begin a process or workflow, or to trigger an action.

Examples of a standard button (left), toggle buttons (middle) and a directions button (right)
Buttons have several states that provide feedback on a button’s interaction:
A: Active State: Indicates a button’s interactivity.
B: Tap State: Communicates that the button has been pressed.
C: Disabled State: Discloses that the action is available but has been disabled.

Active (left), tapped (middle) and disabled buttons (right)
Standard Button
Use the standard button on a sign-in screen, landing screen, confirmation screen, error screen, or on a screen that has one clear primary action. The following are common actions that may be used for the standard button:
- Activate
- Confirm
- Continue
- Create
- Sign in
- Scan
Directions Button
Directions button: The directions button is used only when navigating to an address via a defined route. It can have either a single label, or primary and secondary labels. It will always be displayed as a raised button. Note that the text label styling is slightly different than the standard button.
Button Form Cell
Button Form Cell is for single action purpose related to a target view. Learn more about Button Form Cell.

Button form cell (top), semantic button form cell (middle) and centered button form cell (bottom)
Size Variations
Buttons are dynamic in width and are dependent on the container they are placed in, but they can also be set to a fixed width.
A small button is a 44px tall button that is placed in controls such as object cell.
A large button is a 50px tall button that is placed in simple UIs such as login screens, confirmation screens, or any view with sufficient real-estate.