Buttons

Interaction Specs

Interaction Specs: 

Size

There are 2 sizes basic buttons: Large and small.
  • Use large button when space is ample. i.e. forms.
  • Use small button when: Space is limitted. i.e. in tables and modals.

Emphasis

A button can be formatted to show different levels of emphasis.

Use the primary button when:

  • If there is only one button, use primary to emphasize.
  • Clearly defined primary action to continue the workflow.
  • In a group of buttons, there is intended to be one primary action.

Use the secondary button when:

  • There is no clearly defined primary action
  • In a group of buttons, the action is secondary or optional.

States

  • Active state shows the action is available.
  • Hover state indicates the button is active.
  • Disabled state shows the action is currently not available.
  • Loading state shows the button will become active when the loading is done.
  • Focused state shows the button is selected when using keyboard. Make all buttons keyboard compatible as the browser default.

Icon

A button can have an icon and a label

Grouping

Buttons can exist together as a group.
  • In mixed emphsis group, the primary should be on the left or top of the seconderay. e.g. Apply and Cancel.
  • The same ordinality buttons can also be used in a group. But ideally define a primary action, and use only one primary button in a group.

Split Button

Split button is a hybird of a button and a dropddown selector. The lebel on the button defines the primary action (e.g. “download”)

The menu should have multiple optional actions, the behavior is the same as dropdown selector. This button is useful when the real estate is limited. i.e. to surface multiple actions in a table row.

Split buttons are subject to the same grouping and stacking rules as basic buttons.

Visual Specs

Visual Specs: 

Size

All of the px spec are subject to responsive rules, change to em in coding if needed.

Large
  • Width: Left padding 20px + Label Width + Right padding 20px
  • Height: 35px
  • Label: Arial 13px, regular, (Do not wrap label)
Small
  • Width: Left and right padding 20px + Label Width
  • Height: 25px
  • Label: Arial 13px, regular, (Do not wrap label)

States

Icon

Grouping

Buttons can exist together as a group.

When stacked vertically, the buttons need to be the same width, and the labels need to be center aligned. Keep the left and right padding at 20px minimal if possible.

Fit the button width to parent container width if needed. The labels need to be center aligned if the buttons are stacked vertically.

Split Button

Split buttons inherited all of the states and the behaviors from the basic buttons. The specs (color, hover font, etc) are the same unless it’s call out separately

See dropdown selector for visual specs for the dropdown menu.

Button Placement

Modal Overlay

Command Action - Visual Spec Modal Overlay

Modaless Overlay

Command Action - Visual Spec Modaless Overlay

Disruptive Alerts 01

Command Action - Visual Spec Disruptive Alert

Disruptive Alerts 02

Command Action - Visual Spec Disruptive Alert

Forms

Command Action - Visual Spec placement forms

Table Quick View

Command Action - Visual Spec Table Quickview

Table Filter

Command Action - Visual Spec Table Filter

File Upload

Command Action - Visual Spec File upload

Pattern Summary

Pattern Summary (Unity): 

Why Use This Pattern

A command button is a control that when clicked instructs the application to perform an action. Command buttons differ in their usage and interaction behavior. Buttons are used to perform a single click action, expand a dropdown menu, or open a dialog.

What is the Solution

Command buttons can be implemented with a variety of controls or actions. These are helpful in providing different solutions that require a higher level of complexity than just one one action per button.

  • Default/Primary Button; In a form or wizard, where there is a group of buttons, it is important to provide a default action button that maps to the 'Enter' key on the keyboard.
  • Disabled Button State; Use a disabled button state when a function is not available (due to the state or logic of the application). For example, dim 'Save' button until a change requiring a save operation has been made. For example, in the first step in a wizard, the 'Back' button is dimmed because there is no a previous step.
  • Hidden Button State; Use hidden button state when a user does not have privileges to invoke a function.
  • On Hover State Button; When hovering over a button, the button slightly changes it’s color. This provides an indication that the button is interactive and therefore clickable.
  • Drop Down Button; A 'Drop Down' menu button is a regular labeled action / command button with an arrow icon on the far right indicating dropdown menu functionality. Clicking on the button displays the dropdown menu from which the user can selelct the required action.
  • Split Drop Down Button; Clicking on the button performs a default action. Clicking on the dropdown arrow displays the dropdown menu with several selections from which the user may make a selection. A divider is used to separate the button and the dropdown list arrow.
  • Large Call-to Action Button; The large Call-to Action (CTA) buttons invite the user to take a specific action.
  • Button Labels; Use a single action verb or brief words as button labels. The label should clearly describe the action the button iinvokes, e.g. if the action is to schedule an event on a calendar, label the button 'Schedule'.
Ensure the proper placement of buttons relative to other components. If the action button combines multiple actions, you can use generic button labels. e.g. 'Submit', 'Note'.
  • The 'OK' button label may be uppercase, with no period. Do not use all uppercase letters, the exception is the; 'OK ' button. In some instances a well understood acronym may be used.
  • Use book title capitalization - first letter uppercase.
  • Use a 'Tool tip' (if the text is brief) or hint text above the area in which the disabled button appears.

When to Use This Pattern

The user needs to perform an immediate action.

Do Not Use This Pattern

  • A regular HTML link is more appropriate, such as linking to another web page.
  • The buttons appear in a toolbar. Use a Toolbar Button instead.
  • There are two or three primary button on the same page.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015