Chapter 1: How to Make a Basic Button

Getting Started

Tutorial Image

what it should look like :D

Step 1: Understanding the Basics

for now I will teach you guys how to make a basic button in roblox luau this button will work on any executor!

when understanding this code or any of my code you can see underneath this there is a code example read the comments in it they should look like this: -- a comment. and use that to understand the meaning behind the code.

💡 Try it yourself: try changing the text in the button to whatever you want!

UI BUTTON

Code For a basic button
-- use this for making any button in any game! Example by zzzz

local SG = Instance.new("ScreenGui") -- named SG short for screen gui this is a thing in roblox that is responsible for the things that show on your screen
SG.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui") -- waits for the gui responsible for your player and waits for it to load using something called :WaitForChild more info on this soon!

local B = Instance.new("TextButton") -- creates a new button that has text
B.Text = "Click" -- this is the text thats in the button hence the .Text property all of this will be changed and explained on the next page!
B.Size = UDim2.new(0, 100, 0, 50) -- creats a new value for the size picture this (biggerChangeX, smallerChangeX, biggerChangeY, smallerChangeY)
B.Position = UDim2.new(0.5, -50, 0.5, -25) -- same thing as size in terms of meaning but its responsible for changing the position of the button super cool!
B.Parent = SG -- this is another weird nuinance I will explain in later chapters but for now just picture it as a family and the SG which means screengui is the parent or (holder) of the button since like yk the button is in/on the screen.

B.MouseButton1Click:Connect(function() -- yet another weird thing basically B is the button like we explained but if your mouse cursor clicked it *MouseButton1Click* it means when the cursor connects with the button clicks it in this case it will run a function!

    local player = game.Players.LocalPlayer.Character:WaitForChild("HumanoidRootPart") -- (i used this instead of just manually finding the username of the player to make it a little bit easier for you guys to understand)!
    
    player.Size = Vector3.new(16, 25, 15) -- (x, y, z) and basically the x is how wide you are y is how long you are and z is how high you are. You will most likely learn this in any algebra course as well :D (z axis just means fatness sorta)
end)

Property Reference

Property Reference

my personal ui defintion for properties in the button code

Quick Tips

💡 Remember:

Always set the Parent property last! This ensures your button appears on screen. Basically if you try to load it before your properties it will cause a ton of issues.

🎯 Pro Tip:

check out roblox docs to cross refrence my definition if theres something you dont understand! https://create.roblox.com/docs/ui

⚠️ Common Mistake:

Don't forget the :Connect() at the end of MouseButton1Click or it doesnt understand if you click the button!

list of sigma properties

a detailed explanation of most if not all the properties listed in this chapter!

.Text The text that appears inside the sigma button or sigma label
.Size Controls width and height x, y
.Position the position of the button or thingy
.Parent its like the original holder of something in this case its the screengui since the button is within it, it would then be called a child which we will learn next chapter :D
.BackgroundColor3 Sets the background color using RGB values (Red, Green, Blue) you can look this up if you want more info I hardly know about them but heres an example: yellow = rgb(255, 251, 0)
.TextColor3 color of the text this can change depending on how you want to color it!
.TextSize How big the text appears (in pixels) - higher numbers = bigger text
.Font Which font style to use (like SourceSansBold, SourceSans, etc.)
UDim2.new() A special value for Size and Position. Format: UDim2.new(scaleX, offsetX, scaleY, offsetY) - scale is like changing things in a bigger way offset is the tiny movement u can add after the big changes.
Color3.fromRGB() Creates colors using RGB values. Example: Color3.fromRGB(255, 0, 0) makes it red
Instance.new() Creates new Roblox objects like ScreenGui, TextButton, Frame, etc.
:WaitForChild() Waits for a child object to exist before continuing. Prevents errors when things load slowly basically it just says wait for something to load!
:Connect() Connects a function to an event (like when a button is clicked). This makes things interactive + sigma!
MouseButton1Click a detection method for when the left mouse button is clicked on the element!
Vector3.new() Creates 3D coordinates (X, Y, Z). Used for positioning things in 3D space