UI components
Every field on every UI component, and what it's for. See Getting started for how they fit together, and Scripting for which of these fields a script can read or change at runtime.
Canvas
The container. Add Component → UI → Canvas.
| Field | Meaning |
|---|---|
| Render Mode | Screen Space Overlay (default) — fixed to the screen, ignores the camera. World Space — positioned by this entity's own Transform, like anything else in the scene. |
| Scale Mode | Screen Space Overlay only. Scale With Screen (default) — scales uniformly so nothing stretches. Constant Pixel — one UI unit is always one pixel. Match Width / Match Height — scales by the screen's width or height only. |
| Reference Resolution | The resolution you're authoring against (default 1920×1080) — Scale With Screen and Match Width/Height compare the real screen size to this. Ignored under Constant Pixel. |
| World Space Size | World Space only. The canvas rectangle's size in world units. |
| Apply Safe Area | Screen Space Overlay only. On by default — insets the canvas so content clears notches and rounded corners on devices that report a safe area. |
| Visible | On by default. Showing a canvas gives it input focus; hiding it releases focus to whatever canvas is beneath it, and stops it from rendering or receiving clicks entirely. |
| Sort Order | Which canvas draws (and is clicked) on top when more than one is visible at once — higher wins. Default 0. |
A Canvas entity doesn't have a Rect Transform itself — only its children do.
Rect Transform
Replaces the regular Transform on anything living under a Canvas. Add Component → UI → Rect Transform.
Anchors and the preset grid
An anchor says "which point of my parent do I stay attached to." The Anchor Preset grid — nine corner/edge/center buttons, plus a Stretch (Fill Parent) button — sets Anchor Min/Max for you rather than typing the numbers by hand:
- Pick a corner or edge button when an element should sit a fixed distance from one part of its parent and stay that size regardless of how the parent resizes — a HUD element in a screen corner, for example.
- Pick Stretch when an element should resize along with its parent — a background image, a scroll view's content area.
| Field | Meaning |
|---|---|
| Anchor Min / Anchor Max | Where this element attaches to its parent, as a fraction (0 to 1) of the parent's rectangle. Equal values (a preset corner/edge/center) pin a fixed size at a fixed point; different values stretch with the parent. Set by the preset grid, or by hand for anything the grid doesn't cover. |
| Offset Min / Offset Max | Pixel-space adjustment from the anchor(s). With equal anchors, these are the distances from the anchor point to this element's corners. With stretching anchors, they inset the stretched edges — (0,0,0,0) fills exactly. |
| Pivot | Where rotation and scale happen from, as a fraction of this element's own rectangle (default the center, 0.5, 0.5). Doesn't affect layout — only how it looks once rotated or scaled. |
| Rotation | Degrees, visual only. |
| Scale | Visual only, multiplies this element's size around its Pivot when drawn. |
| Raycast Target | Off by default on every element, including images and text. Turn it on for anything that needs to receive clicks or block clicks from reaching what's behind it — see Troubleshooting. |
Image
A colored and/or textured rectangle. Add Component → UI → UI Image.
| Field | Meaning |
|---|---|
| Color | Tint, multiplied with the texture if one is set. A plain colored panel just uses this with no texture. |
| Texture | Drag an image asset onto the slot. Right-click to clear it back to a flat color quad. |
| 9-Slice | Off by default. See below. |
| Border (L, T, R, B) | Shown only when 9-Slice is on. How many pixels of the source texture, from each edge, are the corners/edges that shouldn't stretch. |
9-slice
A normal image stretches uniformly — a rounded-corner panel stretched that way gets warped, oval corners. 9-Slice splits the image into nine regions (four corners, four edges, one center) and stretches only the edges and center, keeping the corners crisp at any size:
Use it for panels, buttons, and dialog boxes — anything with a border that should stay a fixed thickness no matter how big the box gets.
Text
Uses the same Text component world-space text uses — Add Component → 2D → Text Component (not under the UI submenu, since it's shared with non-UI text).
| Field | Meaning |
|---|---|
| Text String | The text itself. |
| Color | Text color. |
| Kerning | Extra spacing between characters. |
| Line Spacing | Extra spacing between lines, for multi-line text. |
Button
A clickable rectangle. Add Component → UI → UI Button — usually alongside an Image for the button's visible background, and a child Text for its label (see Getting started).
| Field | Meaning |
|---|---|
| Interactable | On by default. Off ignores hover/press/click entirely and always shows the Disabled color. |
| Normal / Hover / Pressed / Disabled | Four separate colors, one per state, applied to the Image on the same entity. These are the actual colors shown in each state — not a tint multiplied onto a base color. |
There's no separate "transition type" setting — color is the only built-in feedback today.
Clicks are handled by overriding OnClick in a script on the same entity as the Button — see Scripting for why, and Troubleshooting if clicks aren't registering.
Selectable and navigation
Added automatically alongside a Button (and usable on its own for anything else that should take keyboard/gamepad focus).
| Field | Meaning |
|---|---|
| Interactable | On by default. Off means this element is skipped entirely when moving focus. |
| Up / Down / Left / Right | Which element focus moves to. Left on (Auto) — the default — focus moves to whichever selectable element is physically nearest in that direction. Set one explicitly when auto-detection picks the wrong neighbor (a wrapped list, an oddly shaped layout). |
Slider
A draggable value between a minimum and maximum. Add Component → UI → UI Slider.
| Field | Meaning |
|---|---|
| Value | The current value. |
| Min Value / Max Value | The range Value is clamped to. Defaults 0/1. |
| Interactable | On by default. |
A slider looks for two child entities by name — one named Fill (the part that grows/shrinks with Value) and one named Handle (the draggable thumb) — rather than a field you assign them to. Name them exactly that to have them respond.
Toggle
An on/off switch. Add Component → UI → UI Toggle.
| Field | Meaning |
|---|---|
| Value | true/false, the current state. |
| Interactable | On by default. |
Like Slider, its checkmark is a child entity named Checkmark by convention, shown/hidden as Value changes. There's no built-in radio-button/group behavior yet — for a set of mutually exclusive toggles, a script needs to turn the others off when one is switched on.
Progress Bar
A read-only 0–1 value, typically paired with a Fill child the same way Slider uses one (see Getting started). Add Component → UI → UI Progress Bar.
| Field | Meaning |
|---|---|
| Value | 0 to 1. Nothing drags this — it's meant to be driven from script (a health bar, a loading bar) or set directly in the Inspector for testing. |
Layout Group
Automatically positions its children in a row, column, or grid instead of you placing each one by hand. Add Component → UI → UI Layout Group.
| Field | Meaning |
|---|---|
| Type | Horizontal, Vertical (default), or Grid. |
| Spacing | Gap between children. |
| Padding (L, T, R, B) | Space between the group's own edges and its first/last children. |
| Columns | Grid only. How many children per row before wrapping. |
| Cell Size | Grid only. Fixed width/height for every cell — cells don't auto-fit their content. |
A child's own anchors/offsets are overridden by the layout while it's in a Layout Group — position it by adjusting Spacing/Padding/order instead.
Mask
Clips its children to its own rectangle — the mechanism a scroll view uses to hide content outside the visible area. Add Component → UI → UI Mask.
| Field | Meaning |
|---|---|
| Enabled | On by default. |
A child straddling the mask's edge is cropped cleanly, not shown in full or hidden entirely — the usual case for a scroll view, where an item at the top or bottom of the visible area is often only partly on screen.
Scroll Rect
A scrollable area — pairs with a Mask on the same entity, and a child named Content holding whatever scrolls. Add Component → UI → UI Scroll Rect.
| Field | Meaning |
|---|---|
| Horizontal | Off by default. |
| Vertical | On by default. |
There's no elasticity/bounce or inertia setting yet — scrolling stops exactly where you release it.
Next
- Getting started — see most of these fields used together
- Scripting — which of these fields (and which don't) a script can touch
- Troubleshooting