UIButton should be used for most actions. Different styles & types can be chosen depending on the desired level of emphasis, and surrounding context.

Styles

1. Primary

For a highly emphasized action within a page or section. Only one primary button should appear per button group. Avoid using more than one per page where possible.

2. Secondary

Used for subordinate actions (e.g. “Cancel”). There can be multiple secondary buttons in a section or button group, unlike primary buttons.

3. Ghost

Used for tertiary actions, where the text should always be visible, but where the outline of a primary or secondary button would be too visually prominent. For actions not significant enough to warrant a ghost button, consider using UITextButton.

‍

Types

a. none

Leaving the type empty will render buttons in the default (and most common) appearance.

b. Success

For actions used to present highly positive actions such as successes, or uplifting confirmations. Styled with color al-win. Avoid using in a button group with buttons of type caution or info.

c. Caution

For actions used to convey a warning or error. Styled with color al-warn. Ideal for usage in UIAlertBox of type warning. Avoid using in a button group with buttons of type success or info.

d. Info

For actions used when presenting neutral information (i.e. not successes or warnings). Styled with color al-info. Ideal for usage in UIAlertBox of type info. Avoid using in a button group with buttons of type success or caution.

‍

Compatibility

UIButtons can be used within other components, for example, appearing on UIHeaders, or in UIPlatformTables.

‍

Action Areas

Multiple UIButtons can be used together to create groups of related actions. The number of buttons in group should be the smallest possible number that accomplishes the desired functionality. Too many UIButtons visible at once can become distracting or overwhelming.

1. Text Label

Buttons are labeled with a single line of centered aligned text.

2. Container

Button text is centered within a rounded rectangle container. The width of the button is determined by the length of the text label, with a minimum size of 72px.

‍

A button should always visually convey its current interactive states: enabled, disabled, hover, focused, pressed. Disabled actions should never disappear entirely from view.

Consistency

To help with predictability, avoid changing button labels, placement, or size based upon interactions. To convey more complex states or action flows, use buttons in concert with other components.

Truncation

A button should be sized to fit the text of its label, not the other way around. Button labels should never be truncated.

‍