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
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}
API in UI Toolkit
Labels in 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
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 best practices
- 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
Unity copy style guide
For more information about copy styling best practices go to the Unity Style Guide ->
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
Label properties
For more information about properties go to the Unity Manual ->
Component: Tooltip
For more information go to Components > Tooltips ->
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.
- Nesting headers
- Inspector component headers
- Nesting foldout labels
- Main tree view folder labels
Focused labels
When focused, labels are highlighted blue, like most other Editor controls in focused states.
Labels with semantic colors
Semantic colors are used in text to convey conventional meanings and convey the same meaning in all contexts.
- Blue link labels are used for external links, and are reserved for directing users out of the editor. Do not use them to open editor native windows.
- Red and orange are reserved for error and warning messages. Read more on errors and messaging
See all label color variables ->
Fundamentals: Text Color Styles
For more information about typography color variables go to Fundamentals > Color palette page ->
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
All text variables
Default 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
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 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
Code references
Scripting references for
UI Toolkit
Provides an Element displaying text.
Scripting references for
IMGUI
Provides an Element displaying text.
Resources and related
Copyright © 2024 Unity Technologies
