Buttons

Buttons perform actions. We have multiple types of buttons including basic, menu, combo, and combo link. The hierarchy of importance is emphasized and delineated by using primary and secondary buttons.

Web

When to Use

In case you were wondering… buttons and dropdowns are very different patterns!  Here are some ways to help decide which is right for you:

Button
can be primary, secondary, or jumbo
• a single call to action
• a single click performs the action
Menu Button
can be primary or secondary
menubutton
• one category of actions
• at least 2 options
• no primary call to action (all options of equal importance)
Combo Button
can be primary or secondary
combobutton
• a call to action with at least 2 options
• 1 primary action promoted to the label
• less important actions included in the menu
• actions aren’t always related
Combo Link
combolink
• a less prominent version of the Combo Button
Looking for a way to select options? Check out the Select Dropdown

Use Primary Buttons

  • When the user needs to submit a form or mark the completion of a task (examples: Save, Done).
  • To indicate the next step in a multi-step process (examples: Next, Continue).
  • To initiate a new task (examples: Create a new customer, Create a new Employee, Create a new report).

Use Secondary Buttons when there is a an action accompanying the primary call-to-action.

A Menu button is used when there are multiple actions (2 or more) the user can choose and there isn’t a primary action. (example: on the Sales transactions page, it’s possible to create many types of items and there isn’t a primary item so they live in a menu under the “Create new” parent button).  An action must be selected for the button to do something such as change items on the page or launch a new flow.

A Combo Button is used when there is a choice of multiple actions (2 or more) the user can choose and one of them is the primary action. (example: on an invoice, the primary action is “Save”, and the related actions might be “Save and close” and “Save and create new”.)

A Combo Link is a less-prominent version of the combo button. Use Combo Links when…

  • There are multiple Combo Buttons placed on a single page.
  • The Combo Button is not the primary call-to-action the user should focus on.
  • There is unnecessary visual cognitive load ( for instance, multiple buttons in a table, multiple options in a section, in the activity feed – since there are multiple actions within an item.)
  • Always use a Combo Button in a table with multiple buttons.
    • Align the buttons to right
    • If there are a combination of links and Combo Buttons, align all to the right.

Icon Only Buttons are reserved for actions that can be summarized by an easily understood icon. Use caution when applying this style, as it can be quite challenging to establish icons for each corresponding action. (examples: email, print)

A Jumbo Button is reserved for actions that are consumer facing or directly impacts revenue. (e.g. the ‘Pay now’ button in e-invoicing or out-bound payments.) Don’t overuse. Be cautious and use it rarely.

Appearance & Behavior

Primary Buttons

Primary Buttons are Intuit blue and designed to be bright, as they are used for the primary task – an action that is critical or indicative of the next action in the user’s workflow. A maximum of one Primary Button may exist on a page.

disabled / default / hover / focus and active

Secondary Buttons

Secondary Buttons are used to highlight a important actions where a Primary Button also exists.

disabled / default / hover / focus and active

Menu Buttons

The menu button contains a single click target consisting of a label and arrow.  The label represents the category of items contained in the menu.  When clicked, a menu of actions appears.  On mouseover of options, a blue highlight appears. By default, nothing is highlighted.

Disabled / Default / Hover and Focus / Expanded / Expanded Hover

Disabled / Default / Hover and Focus / Expanded / Expanded Hover

Disabled / Default / Hover and Focus / Expanded / Expanded Hover

Disabled / Default / Hover and Focus / Expanded / Expanded Hover

Combo Buttons

The Combo Button is composed of two side-by-side buttons. The left button is the default action (the most commonly used one) and the arrow on the right opens a menu with other related actions. The standard behavior is, the primary action always remains the same, regardless of what the user clicks and it does not appear again in the list; the variation is, the action that the user last clicked on is remembered and populated as the primary one. Use the variation where it makes sense (e.g. the users are likely to choose the action that was last clicked). On mouseover of menu items, a blue highlight appears. By default, nothing is highlighted.

disabled / default  / main action hover / arrow hover / expand / expanded hover

disabled / default / primary hover / secondary hover / expand / expanded hover

disabled / default / main action hover / arrow hover / expand / expanded hover

Combo Link

The Combo Link is a less prominent version of Combo Button. On hover, focus, click, or tap, the link is underlined. The left link is the default action (the most commonly used one) and the right button (the arrow) opens an menu with available related actions.

buttons_dia_combo-links

default / primary hover / secondary hover / expand / expanded hover

Segmented Buttons

Segmented Buttons allow the user to select from a group of mutually exclusive options. The first button in the group is selected and represents the default option. Only one button is selectable at a time.

Active and Hover / Default

Active and Hover / Default

Icon Only Buttons

These buttons are only present as part of a group of Icon Only Buttons, typically within a toolbar (such as the sticky footer). On hover, a Tooltip appears, containing a concise label for the corresponding Icon Only Button.

Jumbo Buttons

Basically, Jumbo Button is a large primary button, so maximum of one Jumbo Button may exist on a page. It has a fixed height of 50px and maximum width of 250px. Keep the button label concise. Never put a Jumbo Button in the Trowser’s sticky footer. See a Jumbo Button example.

disabled / default / hover, active / focus

disabled / default / hover, active / focus

Button Hierarchy

Button order must remain consistent throughout all applications. The primary button is aligned right, and the secondary button is aligned left. When three buttons are needed (not recommended), the tertiary button is aligned left, and the secondary button is side-by-side with the primary button. In a Modal, a single primary action should be centered.

Responsive Behavior

On small breakpoints, certain instances call for a full width button.  For example, modal windows with a primary and secondary option benefit from stacking 2 full width buttons on top of each other.  However, buttons remain normal size in many cases as well (such as in drawer or trowser footers).

Combo buttons do not exist on mobile devices due to the need for very clear tap targets.  In these cases, we recommend using a menu button with a more generic label.

Menu buttons on tablets work as they do on desktop web. However, on mobile phones, we provide a more device-optimized experience. In these cases, tapping the menu button dims the page and then slides a full-width menu of options from the bottom of the page. The menu must always be shorter than the total height of the device so that the user can tap the mask to cancel out of the menu if desired.

Example of menu button on a phone

Example of menu button on a phone

iOS

Appearance & Behavior

Mobile devices use both icons and text buttons. Use standard iOS buttons on toolbars and navigation bars whenever possible. If using icon buttons, avoid crowding, and remember to leave enough space for big fat fingers. Also use system-provided Edit, Cancel, Save, Done, Redo, and Undo buttons as needed.

 

Header with a back button

Header with system provided back and edit buttons

 

Stepper

stepper increases or decreases a value by a constant amount. it doesn’t display the value that the user changes, so be careful to make that obvious.

Stepper

 

 

Android

Appearance & Behavior

Android buttons can have an image, text, or both.

Default / Pressed / Focused / Disabled / Disabled and Focused

 

Text Guidelines

  • Button capitalization is sentence case
  • Buttons do not have punctuation
  • A combo button is composed of two buttons: the left button is the default option (the most commonly used one), and the right button (the arrow) shows the available related options.
    • If the related options supplement the default option, you can use a verb to start the default option and nouns for the related options. For example: “Create new” / “Bill,” “Expense,” and “Check.”
    • If the related options are parallel to the default action, you can use verbs to start both the default option and the related options. For example: Preview payroll and Save for later.
© Intuit 2016 | Terms of use