Roblox UI Components Guide: ScreenGui, Frame, TextLabel & TextButton Explained
Where Do You Even Put UI in Roblox?
When you're just starting out with Roblox game development, building a UI can feel confusing fast.
You want to show a score on screen, or add a button to open a menu — but which object do you use? Where does it go? Why isn't anything showing up?
Roblox has a set of built-in UI objects called UI components, and all on-screen elements are built from them. This guide covers the four you'll use most: ScreenGui, Frame, TextLabel, and TextButton — what each one does, and how they fit together.
The Foundation: ScreenGui
Every UI element in Roblox must live inside a ScreenGui. Think of it as a transparent canvas that sticks to the player's screen.
Place it directly inside StarterGui. When the game starts, Roblox automatically copies it to each player's screen.
StarterGui
└── ScreenGui ← The foundation for all your UI
└── (Add UI elements here)
If you try to place a TextLabel directly under StarterGui without a ScreenGui, it won't display correctly. Always start with a ScreenGui — that's the first rule of Roblox UI.
Grouping Elements: Frame
A Frame is an invisible container used to group and organize UI elements. It doesn't display anything on its own, but it lets you define regions — "this area is the score display," "this area is the main menu."
A common pattern for a score display looks like this:
ScreenGui
└── Frame ← Score display area
└── TextLabel ← Shows "Score: 100"
Frames also support background color, transparency, and rounded corners (via UICorner), so they're useful for designing panels and windows too. The easiest way to think about them: a Frame is the parent that holds related UI elements together.
Displaying Text: TextLabel
TextLabel is the object for displaying text on screen. Use it for scores, descriptions, player names, or any text that the player reads but doesn't interact with.
The three properties you'll set most often:
| Property | Description |
|---|---|
Text |
The text content to display |
TextSize |
Font size |
BackgroundTransparency |
Background opacity (set to 1 for transparent) |
You can also update it dynamically from a script — TextLabel.Text = "Score: " .. score — making it essential for showing live game information.
Making Buttons: TextButton
TextButton looks similar to TextLabel, but it's clickable. Players can interact with it, and you can respond to those interactions using events like MouseButton1Click.
A basic example using a LocalScript:
local button = script.Parent
button.MouseButton1Click:Connect(function()
print("Button clicked!")
end)
Use TextButton whenever a player needs to take an action — opening a menu, purchasing an item, restarting the game. The key distinction: TextLabel for display only, TextButton when it needs to be clicked.
A Note From Experience
When I started making Roblox games, I had no idea where to put UI elements or which objects to use. I was trying to place text directly on parts before I even knew ScreenGui existed. Learning the basics opened up everything else.
Once you have a handle on UI structure, the natural next step is making it look right across different devices. How to handle phones, tablets, and desktops with UIScale is covered in detail in How to Make Your Roblox UI Responsive Across All Devices. For calculating scale values quickly, Roblox UI Scale Calculator is a handy companion tool.
Summary
- ScreenGui: The foundation of all Roblox UI — place it under
StarterGui - Frame: An invisible container for grouping related UI elements
- TextLabel: Displays text; use it for scores, labels, and read-only information
- TextButton: A clickable button; connect it to events to respond to player input
- Start with
ScreenGui → Frame → TextLabel / TextButtonand you'll have a clear mental model for building any Roblox UI