Widgets are UI elements that you can add or remove in the UI.
The following sections describe all the widgets you can use to create your custom UI in Verse.
Canvas
A canvas is a container widget. You can position other widgets within the canvas using canvas slots to design your UI. When a canvas widget is at the top of the UI hierarchy, it represents the whole screen.
You can nest a canvas widget within another canvas widget, but the root canvas widget is the only one that will encompass the entire screen.
For examples on how to create a canvas widget and how to position widgets on the screen, see Positioning Widgets on the Screen.
Button
There are three kinds of button widgets you can add to your UI. The difference between each button is only cosmetic.
UI | Verse Code |
---|---|
![]() |
|
![]() |
|
![]() |
|
See Making Widgets Interactable for how to make button interactions.
Color Block
You can create a widget where you define its color and opacity using the color_block widget.

Widget := color_block:
DefaultColor := NamedColors.CornflowerBlue
DefaultOpacity := 1.0
DefaultDesiredSize := vector2{X := 128.0, Y := 128.0}
Image
You can add images to your UI using a texture assigned to the texture_block widget.

Widget := texture_block:
DefaultImage := MyTexture
DefaultDesiredSize := vector2{X := 128.0, Y := 128.0}
For how to expose your textures in UEFN to your Verse code, see Exposing Assets in UEFN to Verse.
Slider
You can add sliders so a player can set values in a predefined range. The step size property is how much the value is changed on a controller or keyboard, but it doesn’t affect the step size for a player using a mouse to change the value.

Widget := slider_regular:
DefaultValue := 5.0
DefaultMinValue := 0.0
DefaultMaxValue := 10.0
DefaultStepSize := 0.5
See Making Widgets Interactable for how to make slider interactions.
Text
To display text in your UI, use the Text Block.

TextForUI<localizes> : message = "This is my text!"
Widget := text_block{DefaultText := TextForUI}
Overlay
You can stack widgets on top of each other using an overlay widget. The widgets are rendered in the order you specify the overlay slots

In the example below, the color block is rendered first, and then the text block is rendered on top of the color block. If you swapped the order of the overlay slots (where the text block is first), the color block would render over the text block, hiding the text.
TextForUI<localizes>(InText : string) : message = "{InText}"
Widget := overlay:
Slots := array:
overlay_slot:
Widget := color_block:
DefaultColor := NamedColors.MintCream
DefaultOpacity := 1.0
DefaultDesiredSize := vector2{X := 1024.0, Y := 128.0}
overlay_slot:
Widget := text_block:
DefaultText := TextForUI("This is my text block overlaying a color block.")
Stack Box
You can stack widgets vertically or horizontally using a stack box widget.
Vertical Orientation | Horizontal Orientation |
---|---|
![]() |
![]() |
|
|