Documentation/content/ui-systems/ui-widgets.en.md

title, type, weight

title	type	weight
UI Widgets	docs	12

This page documents all available widget types in Hytale's UI system.

Container Widgets

Group

Basic container for organizing other widgets.

Group #Container {
  Anchor: (Width: 400, Height: 300);
  Background: (Color: #000000(0.5));
  LayoutMode: Top;
  Padding: (Full: 16);

  // Child widgets...
}

Key Properties:

• Anchor - Position and size
• Background - Background color or texture
• LayoutMode - Child arrangement mode
• Padding - Inner spacing
• Visible - Show/hide
• FlexWeight - Flexible sizing weight

Text Widgets

Label

Displays static or dynamic text.

Label #Title {
  Text: "Hello World";
  Style: (
    FontSize: 24,
    TextColor: #ffffff,
    RenderBold: true,
    HorizontalAlignment: Center,
    VerticalAlignment: Center
  );
  Anchor: (Height: 40);
}

Key Properties:

• Text - Text content (string or %translation.key)
• Style - LabelStyle object
• Anchor - Position and size
• Padding - Text padding

Button Widgets

Button

Clickable button without text label.

Button #CloseButton {
  Anchor: (Width: 32, Height: 32);
  Style: (
    Default: (Background: "CloseButton.png"),
    Hovered: (Background: "CloseButtonHovered.png"),
    Pressed: (Background: "CloseButtonPressed.png"),
    Disabled: (Background: "CloseButtonDisabled.png"),
    Sounds: @ButtonSounds
  );
}

TextButton

Button with text label.

TextButton #SubmitButton {
  Text: %ui.button.submit;
  Style: (
    Default: (
      Background: (TexturePath: "Button.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #ffffff)
    ),
    Hovered: (
      Background: (TexturePath: "ButtonHovered.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #ffffff)
    ),
    Pressed: (
      Background: (TexturePath: "ButtonPressed.png", Border: 12),
      LabelStyle: (FontSize: 16, TextColor: #cccccc)
    ),
    Sounds: @ButtonSounds
  );
  Anchor: (Height: 44);
  Padding: (Horizontal: 24);
}

BackButton

Pre-styled back/dismiss button.

BackButton {}

ActionButton

Button that displays an action name with input binding.

ActionButton #BindingInventory {
  Disabled: true;
  LayoutMode: Right;
  Alignment: Right;
  ActionName: %client.hud.inputBindings.inventory;
  Anchor: (Top: 15);
}

Input Widgets

TextField

Single-line text input.

TextField #NameInput {
  Anchor: (Height: 38);
  Style: @DefaultInputFieldStyle;
  PlaceholderStyle: @DefaultInputFieldPlaceholderStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  PlaceholderText: %ui.placeholder.enterName;
}

NumberField

Numeric input field.

NumberField #QuantityInput {
  Anchor: (Width: 100, Height: 38);
  Style: @DefaultInputFieldStyle;
  Background: (TexturePath: "InputBox.png", Border: 16);
  Padding: (Horizontal: 10);
  Min: 1;
  Max: 100;
}

CompactTextField

Expandable search-style text field.

CompactTextField #SearchInput {
  Anchor: (Height: 30);
  CollapsedWidth: 34;
  ExpandedWidth: 200;
  PlaceholderText: %ui.search.placeholder;
  Style: (FontSize: 16);
  PlaceholderStyle: (TextColor: #3d5a85, RenderUppercase: true, FontSize: 14);
  Padding: (Horizontal: 12, Left: 34);
  Decoration: (
    Default: (
      Icon: (Texture: "SearchIcon.png", Width: 16, Height: 16, Offset: 9),
      ClearButtonStyle: @ClearButtonStyle
    )
  );
  ExpandSound: (SoundPath: "Sounds/Expand.ogg", Volume: 6);
  CollapseSound: (SoundPath: "Sounds/Collapse.ogg", Volume: 5);
}

Slider

Horizontal slider control.

Slider #VolumeSlider {
  Anchor: (Width: 200, Height: 16);
  Style: (
    Background: (TexturePath: "SliderBackground.png", Border: 2),
    Handle: "SliderHandle.png",
    HandleWidth: 16,
    HandleHeight: 16,
    Sounds: (
      Activate: (SoundPath: "Tick.ogg", Volume: 10),
      MouseHover: (SoundPath: "Hover.ogg", Volume: 6)
    )
  );
  Min: 0;
  Max: 100;
  Value: 50;
}

SliderNumberField

Combined slider with numeric display.

SliderNumberField #BrightnessSlider {
  Anchor: (Width: 270, Height: 5);
  SliderStyle: @DefaultSliderStyle;
  NumberFieldStyle: @DefaultInputFieldStyle;
}

CheckBox

Toggle checkbox.

CheckBox #EnableOption {
  Anchor: (Width: 22, Height: 22);
  Background: (TexturePath: "CheckBoxFrame.png", Border: 7);
  Padding: (Full: 4);
  Style: (
    Unchecked: (
      DefaultBackground: (Color: #00000000),
      HoveredBackground: (Color: #00000000),
      ChangedSound: (SoundPath: "Untick.ogg", Volume: 6)
    ),
    Checked: (
      DefaultBackground: (TexturePath: "Checkmark.png"),
      HoveredBackground: (TexturePath: "Checkmark.png"),
      ChangedSound: (SoundPath: "Tick.ogg", Volume: 6)
    )
  );
  Value: false;
}

DropdownBox

Dropdown selection menu.

DropdownBox #LanguageSelector {
  Anchor: (Width: 330, Height: 32);
  Style: (
    DefaultBackground: (TexturePath: "Dropdown.png", Border: 16),
    HoveredBackground: (TexturePath: "DropdownHovered.png", Border: 16),
    PressedBackground: (TexturePath: "DropdownPressed.png", Border: 16),
    DefaultArrowTexturePath: "DropdownCaret.png",
    ArrowWidth: 13,
    ArrowHeight: 18,
    LabelStyle: (TextColor: #96a9be, FontSize: 13),
    PanelBackground: (TexturePath: "DropdownBox.png", Border: 16),
    EntryHeight: 31,
    EntriesInViewport: 10,
    Sounds: @DropdownBoxSounds
  );
}

Display Widgets

Sprite

Animated or static image.

Sprite #LoadingSpinner {
  Anchor: (Width: 32, Height: 32);
  TexturePath: "Spinner.png";
  Frame: (Width: 32, Height: 32, PerRow: 8, Count: 72);
  FramesPerSecond: 30;
}

AssetImage

Display an asset image (item icon, etc.).

AssetImage #ItemIcon {
  Anchor: (Width: 64, Height: 64);
}

ProgressBar

Progress indicator bar.

ProgressBar #HealthBar {
  Anchor: (Width: 200, Height: 20);
  BarTexturePath: "HealthBarFill.png";
  Alignment: Horizontal;
  Direction: Start;
  Value: 0.75;
}

Properties:

• Alignment - Horizontal or Vertical
• Direction - Start or End
• Value - 0.0 to 1.0

Inventory Widgets

ItemGrid

Grid display for inventory items.

ItemGrid #HotbarGrid {
  SlotsPerRow: 9;
  Style: (
    SlotBackground: "ItemSlot.png",
    SlotSize: 64,
    SlotSpacing: 4,
    HoveredSlotBackground: "ItemSlotHovered.png",
    SelectedSlotBackground: "ItemSlotSelected.png"
  );
  Background: (TexturePath: "HotbarBackground.png", Border: 10);
  Padding: 4;
  RenderItemQualityBackground: true;
  AreItemsDraggable: true;
}

Navigation Widgets

TabNavigation

Tab-based navigation.

TabNavigation #CategoryTabs {
  Style: (
    TabStyle: (
      Default: (Background: "Tab.png", IconAnchor: (Width: 44, Height: 44)),
      Hovered: (Background: "TabHovered.png"),
      Pressed: (Background: "TabPressed.png")
    ),
    SelectedTabStyle: (
      Default: (Background: "TabSelected.png", Overlay: "TabSelectedOverlay.png")
    ),
    TabSounds: @TabSounds
  );
}

Tooltip Properties

Many widgets support tooltips:

TextButton #InfoButton {
  TooltipText: %ui.tooltip.info;
  TextTooltipStyle: (
    Background: (TexturePath: "TooltipBackground.png", Border: 24),
    MaxWidth: 400,
    LabelStyle: (Wrap: true, FontSize: 16),
    Padding: 24
  );
}

Widget Summary Table

Widget	Purpose
Group	Container for layout
Label	Text display
Button	Clickable button
TextButton	Button with text
BackButton	Pre-styled back button
ActionButton	Action with keybind display
TextField	Text input
NumberField	Numeric input
CompactTextField	Expandable search field
Slider	Slider control
SliderNumberField	Slider with number display
CheckBox	Toggle checkbox
DropdownBox	Selection dropdown
Sprite	Image/animation
AssetImage	Asset icon display
ProgressBar	Progress indicator
ItemGrid	Inventory grid
TabNavigation	Tab navigation