Log-in required.

You are trying to access the internal Editor Foundations design system.
Sign-in with your Unity Google account to continue, or visit the public site.

Implementation references

Scripting API and implementation references.

UI Toolkit
IMGUI

Label · UX essentials

Guidance on proper usage of labels.

Sliders, numeric fields, and toggles can be interacted with via their label
Blue plus sign icon indicating that clicking on this will expand this content
Labels do not end with punctuation
US-0213
Blue plus sign icon indicating that clicking on this will expand this content
In Inspector-like windows, input controls should have labels and tooltips
Blue plus sign icon indicating that clicking on this will expand this content
Only use link labels for opening external applications
Blue plus sign icon indicating that clicking on this will expand this content
Action-oriented menu and button labels use verbs
US-0212
Blue plus sign icon indicating that clicking on this will expand this content
Use ellipses ("...") in labels if the action requires additional input
Blue plus sign icon indicating that clicking on this will expand this content
UI uses appropriate font sizes
US-0217
Blue plus sign icon indicating that clicking on this will expand this content
Padding exists between text and other UI elements
US-0218
Blue plus sign icon indicating that clicking on this will expand this content
Text is aligned appropriately
US-0219
Blue plus sign icon indicating that clicking on this will expand this content

Resources and API documentation

Overview

Nested control labels
  • Labels are used for identifying input controls in an interface
  • In addition, bold labels can be used to nest elements in an interface
  • Adjustment based controls that require fine input can be interacted with their label
  • When hovered, labels can display tooltips with useful information about the control, ensuring the user has proper information about its function

Label APIs

Labels in UI Toolkit

Object field UI Builder icon
UI Builder allows visual creation of UI assets in UI Toolkit, and is available as a built-in feature {2021.1 and later} or a package {2020.3 and earlier}
U Toolkit
IMGUI
API in IMGUI

Guidance

When to use

Common use cases for labels are;

  • Text that identifies an action or a control; most controls in the Editor should display a control label in front them
  • Tree view and list view items
  • Inspector headers that group other elements
  • Foldouts, tabs and many other controls also have labels

Icons and labels/names

All icons should be assigned a label/name.

Pairing with icons

Common use of labels with icons

Common use of labels with icons are:

  • Inspector component headers
  • Tabs
  • Tree or list view items
Icon of a red triangle to indicate a message of warning.
Avoid using icons in buttons
Most buttons in the Editor should only have an action label. Reserve the use of icons within button labels for when your function requires it.

Content style

Tone and grammar
  • Labels do not end with punctuation such as colons, full stops, or question marks
  • Menu and button labels that perform actions should be verbs or verb phrases that describe the action being performed
  • Labels shouldn't be longer than three words
Use of brackets (#)

When displaying labels with the same content (e.g. duplicated Game Objects in Hierarchy, or assets with the same name) append the number inside of brackets, such as Cube (1), Cube (2).

Elements with same labels are appended with the number and brackets.

Adding tooltips

Labels can be paired with tooltips to display useful information about the control, ensuring the user has proper information about its function. Use tooltip property to display tooltips.

Properties
tooltip
Text to display inside an information box after the user hovers the element for a small amount of time

Formatting

Alignment

Most of the interface labels are left aligned in the Editor, with the exception of buttons and empty state content

Left-aligned
Text in the Editor is left-aligned in windows, dialogs and components including tabs, dropdowns, and menus.

Centre-aligned
The exception to this rule are:

  • Button labels, which are centred within their containers
  • Empty state content

Label styles

Various label styles.
Regular labels

Tree view list items, and labels that identify an action or a control use regular text weight:

Bold labels

Labels can be styled bold when used to group other items, or an active links.

Focused labels

When focused, labels are highlighted blue, like most other Editor controls in focused states.

See all label color variables ->

Interactive labels

Adjustment based control elements that require fine input, or enable / disable toggles when used alone, can be interacted with their label. This gives users a wider area and finer control to interact with these elements:

  • Sliders value can also be adjusted through its label by hovering and dragging the cursor left or right. The cursor switches its glyph when positioned over the label to communicate this ability.
  • Numeric field values can be adjusted the same way as sliders
  • Toggles when used alone, can be toggled ON or OFF via clicking on their label
An animated example of an eyedropper button picking a color from a random part of the screen
interactive-label.gif

All text variables

Default text colors
A Console window with labeled elements showing different text colors.
Console window showing different text colors
1
Default Text
--unity-colors-default-text
The default text color
#090909
#D2D2D2
Default Text Hover
--unity-colors-default-text-hover
The default text color when the mouse pointer hovers over the text
#090909
#BDBDBD
2
Error Text
--unity-colors-error-text
The text color for error messages
#5A0000
#D32222
3
Link Text
--unity-colors-link-text
The text color for unvisited links
#4C7EFF
#4C7EFF
Visited Link Text
--unity-colors-visited_link-text
The text color for visited links
#AA00AA
#FF00FF
Warning Text
--unity-colors-warning-text
The text color for warning messages
#333308
#F4BC02
Windows and component text colors
A Project Settings window with labeled elements showing different text colors.
Project Settings window showing different text colors
1
Helpbox Text
--unity-colors-helpbox-text
The text color for a helpbox control
#161616
#BDBDBD
Highlight Text
--unity-colors-highlight-text
The text color for selected items or selected text
#0032E6
#4C7EFF
Highlight Text Inactive
--unity-colors-highlight-text-inactive
The text color for selected items or selected text when the control does not have focus
#FFFFFF
#FFFFFF
2
Label Text
--unity-colors-label-text
The text color for a label control
#090909
#C4C4C4
3
Label Text Focus
--unity-colors-label-text-focus
The text color for a label when it has focus
#003C88
#81B4FF
Preview Overlay Text
--unity-colors-preview_overlay-text
The text color for a preview control overlay
#FFFFFF
#DEDEDE
Window Text
--unity-colors-window-text
The text color for a window
#090909
#BDBDBD
Toolbar text colors
A Scene window with labeled elements showing different text colors used in toolbars.
A Scene window showing different text colors used in toolbars
1
Tab Text
--unity-colors-tab-text
The text color for an Editor window tab
#090909
#BDBDBD
2
Toolbar Button Text
--unity-colors-toolbar_button-text
The text color for a toolbar button control
#090909
#C4C4C4
Toolbar Button Text Checked
--unity-colors-toolbar_button-text-checked
The text color for a toolbar button control when it is checked
#090909
#C4C4C4
Toolbar Button Text Hover
--unity-colors-toolbar_button-text-hover
The text color for a toolbar button control
#090909
#BDBDBD

Code samples