When to use

The basic button initiates a specific action once selected. Once basic button actions are performed their task is complete.

When to use

• Independent toggle buttons are used for properties that are not dependent on each other but grouped together thematically (e.g. in TextMeshPro)
• It is possible to select multiple independent toggle buttons

When to use

• Dependent toggle buttons are used for properties that are dependent on each other and are tied together functionally (e.g. in Scene Toolbar)
• It is not possible to select multiple independent toggle buttons

Button order in the Editor

Button group ordering in the Editor

In the Editor, destructive buttons are aligned on the left, and secondary / primary buttons are aligned on the right hand side of the panel they are displayed in.

Button row span

For most Editor windows, button row spans the full width of the window.
However, consider keeping the buttons aligned to the right corner of the window when:

• The bottom left corner of the window is busy, and has other elements / actions,
• When the window will be used wide and users might miss the left hand side.

Button order in dialogs

OS dialogs in macOS 12 / macOS 11 and Win 8 has different button orders

Editor API for dialogs display the native operating system dialog.

Button order in dialogs is dependant on the operating system.

Note that Editor API will automatically display the operating systems default button order.

1. On macOS 12, button order is; ok / alt / cancel
2. On macOS 11, button order is; alt / cancel / ok
3. On Windows, button order is; ok / alt / cancel

Size parameters in IMGUI

Mini, default, and large basic buttons

Buttons come in three sizes in the IMGUI framework:
‍
1. Default button: .Button
2. Large button: .LargeButton
3. Mini button: .minibutton

Grouped buttons in IMGUI

When grouping toggle buttons remember to adjust left / right borders and margins

When grouping toggle buttons in the IMGUI framework, use these parameters to adjust left / right borders and margins:
‍
1. Leftmost button: .ButtonLeft
2. Middle button: .ButtonMid
3. Rightmost button: .ButtonRight

Labels

"Export Coordinates..." button opens "Export Coordinates" window

• Button labels are horizontally and vertically centered
• When labeling, make sure to highlight the action that the button performs
• If the button performs an action use an active verb to indicate the user initiates the action
• If the button is for navigation then indicate the endpoint
• If the button is to select a tool then use the established icon for its tool type.
  For more information go to Foundations > Iconography
• For confirmation buttons restate the action being performed or a suggested action relating to the dialog

• For actions that have additional inputs or open windows following the initial choice, use an ellipses (...) after the action text. This indicates that the action offers more options or requires additional specification.

Label text

Buttons use labels to indicate their function and can be either a basic button or toggle button. Text buttons rely on words to express concepts that cannot be easily conveyed by icons or glyphs in an accessible manner. Buttons have text labels that should clearly and concisely indicate what action they perform.

• Button labels are limited to a single line of text
• Use title case for capitalization, making sure text conforms to our writing Style Guide
• Be concise by avoiding too many words
• Be clear by using simple, common and specific words; avoid jargon or wording that is vague or obscure

Anatomy

Default button with a label and an icon

A button can contain the following elements:
‍
1. Label
2. Icon
3. Container

Layout and specs

Margin and padding specs for three button sizes

Height and padding specs for three sizes:‍
1. Mini Button: height is 18px, padding is 2 px 
2. Default Button: height is 20px, padding is 3px
3. Large Button: height is 24px, padding is 5px

Buttons have relative width.

Buttons have relative width based on the layout they are displayed. They can be set to hug their contents or expand to fill the container they are in.

Interaction states

Interaction states for basic buttons

Interaction states for toggle buttons

Default

The default state is the pre-interaction state.

Hover

When the cursor is over the button element.

Active  

When the interaction is occurring or active, such as a menu being open or toggling a property.

Active focused

When the user has highlighted the active button element.

Focused

When the user has highlighted the default button element.

Hover focused

When the cursor is over the focused button element.

Disabled

When the interaction is not available to the user.