Below you can find a list of UI nodes that can be used in Godot 4. This is part of my Book of Nodes series. If you want to see similar content on 2D or 3D nodes, please refer to the parent page of this post for those links. 😊

Before we begin, if you need a base project to test these code snippets, feel free to download my FREE 2D and 3D templates here. I’ll be using these templates throughout this post.

*Please note that this list is NOT 100% complete yet, but I will be updating this list as time goes on.

• CanvasLayer
• CanvasModulate
• Container
• HBoxContainer
• VBoxContainer
• GridContainer
• ColorRect
• Panel
• Button
• Label
• RichTextLabel

Common Properties

Anchoring

• Determines how a UI element is positioned and resized relative to its parent container.
• anchor_left: Sets the left anchor point (0 to 1).
• anchor_top: Sets the top anchor point (0 to 1).
• anchor_right: Sets the right anchor point (0 to 1).
• anchor_bottom: Sets the bottom anchor point (0 to 1).
• full_rect: Sets the anchor point to all sides.

Margins

• Defines the distance between the UI element and its parent container’s edges.
• margin_left: Distance from the left edge.
• margin_top: Distance from the top edge.
• margin_right: Distance from the right edge.
• margin_bottom: Distance from the bottom edge.

Font

• Customizes the appearance of text within UI elements.
• font: The font resource used for the text.
• font_size: The size of the font.
• font_color: The color of the font.

Color

• Customize the color properties of UI elements.
• color: The main color of the UI element.
• font_color: The color of the text.
• modulate: The alpha value applied to the UI element.

Transform

• Controls the position, rotation, and scale of UI elements.
• rect_position: The position of the UI element.
• rect_rotation: The rotation of the UI element in degrees.
• rect_scale: The scale of the UI element.

Size Flags

• Determines how a UI element resizes within its parent container.
• size_flags_horizontal: Horizontal resizing behavior (e.g., fill, expand).
• size_flags_vertical: Vertical resizing behavior (e.g., fill, expand).

Visibility

• Controls the visibility of UI elements.
• visible: Whether the UI element is visible.
• self_modulate: The color modulation applied to the UI element, affecting its visibility.

Focus

• Manages keyboard and controller focus for UI elements.
• focus_mode: Determines if the UI element can receive focus (none, click, all).
• focus_neighbour_*: Specifies neighboring UI elements for focus navigation (up, down, left, right).

Tooltip

• Provides additional information when the user hovers over a UI element.
• hint_tooltip: The text displayed as a tooltip.

Theme Overrides

• Allows customization of the UI element’s appearance beyond the default theme.
• theme: The theme resource applied to the UI element.
• theme_type_variation: A variation of the theme type for more specific customization.

CanvasLayer

A CanvasLayer is used for independent rendering of objects within a 2D scene, often for UI elements or HUDs. It renders its child nodes independently of the main scene's camera, which means that they remain fixed on the screen.

Example Use Cases:

• HUD (Heads-Up Display).
• Fixed-position UI elements.
• Overlay menus.

Container

A Container is used to organize UI elements, providing a base class for various container types. It inherits from Control and provides functionality for arranging child nodes.

Example Use Cases:

• Base class for custom container types.
• Organizing complex UI layouts.
• Creating custom layout behaviors.

HBoxContainer

An HBoxContainer is used to arrange UI elements horizontally. It inherits from Container and arranges its children in a horizontal line.

Example Use Cases:

• Horizontal menus.
• Toolbars.
• Row-based layouts.

VBoxContainer

A VBoxContainer is used to arrange UI elements vertically. It inherits from Container and arranges its children in a vertical line.

Example Use Cases:

• Vertical settings menus.
• Stacked buttons.
• Column-based layouts.

GridContainer

A GridContainer is used to arrange UI elements in a grid. It inherits from Container and arranges its children in a grid layout.

Example Use Cases:

• Keypads.
• Control panels.
• Inventory grids.

ColorRect

A ColorRect is used to display a solid color rectangle, often for backgrounds or color overlays. It inherits from Control and provides a simple way to display a rectangle filled with a specified color. The color can be set and changed dynamically.

Example Use Case:

• Background overlays.
• Progress bars.
• Color indicators.

Panel

• A Panel is used to create a panel for grouping UI elements, providing a background and border. It inherits from Control and provides a simple way to group and visually separate UI elements.

Example Use Case:

• Settings panels.
• Dialog boxes.
• Grouping related UI elements.

CanvasModulate

A CanvasModulate applies a color tint to all nodes on a canvas. It tints the canvas elements using its assigned color.

Example Use Cases:

• Night mode effect.
• Global color adjustments.
• Visual effects for different game states.

Button

A Button is used to create a clickable button for user interactions. It inherits from BaseButton and provides functionality for detecting clicks and triggering actions.

Example Use Cases:

• Interactive buttons.
• Menu options.
• Form submissions.

Label

A Label is used to display text. It inherits from Control and provides functionality for displaying text.

Example Use Cases:

• Static text display.
• Descriptive labels.
• Titles and headings.

RichTextLabel

A RichTextLabel is used to display formatted text. It inherits from Control and provides functionality for displaying rich text with formatting, such as bold, italics, and images.

Example Use Cases:

• Formatted text display.
• Dialogue boxes.
• Instructional text.