Updated: June 26, 2020

Button Form Cell

FUIButtonFormCell

Intro

A Button Form Cell represents an action that can be taken in a view.

Usage

Do

Use Button Form Cell for representing a relevant action for a current view.

Don't

Do not use Button Form Cell to represent a select option. Use Form Cell with Buttons or List Picker instead.

Variants

Standard Button Form Cell

Standard Button Form Cell is used for an action dedicated to the current view on the screen. Using the button to represent an action for Table View is one of the examples.

Centered Button Form Cell

Centered Button Form Cell is used to represent a global action for the whole window or the app. Generally, this type of button is put at the bottom of the view, separated in its own section. “Sign In” or “Save” actions are ones of the examples.

Semantic Button Form Cell

Semantic Button Form Cell is used when the action that the button represents needs careful attention when interacting with. “Sign Out” and “Delete” are ones of the examples of actions that require semantic color. Similar to Centered Button Form Cell, this button type is usually placed in a separate section.

Behavior & Interaction

Text Wrapping

Button Form Cell allows text wrapping when the Button Label is too long. There is no truncation, but it is recommended to have a short and concise label text.

Specs

Compact Width

Compact Width Variant’s layout margin is 16pt.

The top and bottom paddings are 11pt.

When using the component in a stack of Table View, the first or middle button needs a short Hairline to separate from the button below.

Regular Width

Regular Width Variant’s layout margin is generally 20pt. Full-Width Variant’s layout margin is 48pt. Readable-Width Variant has a maximum width of 672pt.

The top and bottom paddings are 11pt.

When using the component in a stack of Table View, the first or middle button needs a short Hairline to separate from the button below.

Resources

Button