This documentation is for a prerelease version of O3DE. Click here to switch to the latest release, or select a version from the dropdown.

Version:

Icon of a magnifying glass.
  Edit on GitHub

IN THIS ARTICLE

UI Components

UI components define the properties of a UI element. For example, every element has a Transform2D component that defines its position, rotation, size, and scale. You can give an element additional properties by adding components, such as adding the Image component to give an element color or texture. Each UI element can have one visual component (Image or Text), one interactive component (Button, Check Box, Scroll Box, Slider, or Text Input), and one layout component (Layout Column, Layout Row, or Layout Grid). You can attach any or all of the remaining components: Dynamic components, Tooltips, Tooltips Display, Mask, and Fader.

Section topics

TopicDescription
Working with UI componentsLearn how to work with O3DE’s UI components.
UI Transform2DUse the UI Transform2D component to position and scale UI elements.
Visual componentsLearn about the visual components you can add to UI elements.
Interactive componentsLearn about interactive components and how UI canvases consume user input.
Layout componentsLearn how to use the layout components to arrange elements on a canvas.
Tooltip componentsAdd tooltips to your canvases with the Tooltip components.
UI FaderUse the UI Fader component to adjust the transparency of UI elements.
UI Flipbook AnimationUse the UI Flipbook Animation component together with the UI Image component to create animations.
UI MaskUse the UI Mask component to selectively hide areas of an element’s children.
UI SpawnerLearn how to spawn UI elements at runtime.