UI

You can quickly create high-quality graphical user interfaces with minimal scripting requirements using built-in UI objects. Depending on where you create it, UI renders either on-screen or within an experience's 3D world.

On-Screen UI

On-screen containers hold UI objects that you want to display on a user's screen. All on-screen UI objects and code are stored and changed on the client.

In-Experience UI

In-experience containers such as SurfaceGuis and BillboardGuis hold UI objects that you want to display within your experience's 3D world.

Objects

Most UI elements are GuiObjects, 2D graphical user interface objects that you can parent to containers. The four most common are frames, labels, buttons, and text input objects.

Using the Position, Size, AnchorPoint, and ZIndex properties, you have complete control on how to position, size, and layer GuiObjects. You can also use tweening to transition a GuiObject smoothly from one state to another and provide dynamic visual feedback.

Frames

Frames act as containers for other GuiObjects such as Labels or Buttons. When you manipulate frames, you also manipulate the objects they contain.

Labels

Labels allow you to display customizable text and images.

Buttons and Text Input

Button objects allow users to prompt an action while Text Input objects allow users to input text. You can customize these objects to provide context and prompts for what you want a user to do.

Proximity Prompts

Proximity Prompts are unique built-in UI objects which prompt user interaction to trigger an action when they approach in-experience objects such as doors, light switches, and buttons.

Drag Detectors

Drag Detectors encourage physical interaction with objects in an experience, such as opening doors and drawers, sliding a part around, grabbing and tossing a bowling ball, pulling back and firing a slingshot, and much more.

Layout and Design

Beyond basic properties for adjusting position and size, Roblox also provides layouts, constraints, and appearance modifiers for further refining your UI. You can also animate UI through smoothly transitioning between property values.

9-Slice Design

Under the 9-slice design approach, you can divide a single Roblox image asset into nine sub-images, each with different scaling rules. This allows you to create UI elements of varying sizes without distorting the borders or corners.

Same border design used on UI elements of different sizes

Rich Text Markup

UI rich text utilizes simple markup tags to style sections of a string in bold, italics, underline, fill color, stroke variations, and more. You can apply styling tags to TextLabel, TextButton, and TextBox objects.