In this tutorial, we’ll learn how to create a clickable button in Roblox that can toggle a frame (menu) open and closed. This is the foundation of most menu systems you’ll see in Roblox games.

---

Step 1: Create the GUI

1. In StarterGui, insert a ScreenGui.
2. Inside it, insert a TextButton (you could also use an ImageButton).
3. Position and size the button however you like.

---

Step 2: Insert a LocalScript

We’ll control the button using a LocalScript. Instead of putting separate scripts inside every GUI object, we’ll use one script to handle everything.

1. Add a LocalScript inside your ScreenGui.
2. Reference the button in the script:

local textButton = script.Parent:WaitForChild("TextButton")

---

Step 3: Detect Button Clicks

Roblox provides events like MouseButton1Click (fires when the left mouse button is released, or a tap on mobile).

textButton.MouseButton1Click:Connect(function()
    print("Button has been clicked!")
end)

If you play the game now and click the button, you’ll see the message in the Output window.

---

Step 4: Add a Frame to Toggle

1. Inside the same ScreenGui, insert a Frame.
2. Set its Size (e.g., {0.5, 0},{0.5, 0} for half the screen).
3. Set its AnchorPoint to (0.5, 0.5) and position it in the middle.
4. Uncheck Visible (we want it hidden at the start).

Reference the frame in the script:

local frame = script.Parent:WaitForChild("Frame")

---

Step 5: Toggle the Frame

We’ll make the button show/hide the frame each time it’s clicked.

textButton.MouseButton1Click:Connect(function()
    frame.Visible = not frame.Visible
end)

The not keyword flips the value — if the frame was hidden, it becomes visible; if it was visible, it becomes hidden.

---

Step 6: Update Button Text

Let’s make the button text say Open when the frame is hidden, and Close when the frame is visible.

textButton.MouseButton1Click:Connect(function()
    frame.Visible = not frame.Visible
    textButton.Text = frame.Visible and "Close" or "Open"
end)

This is a shorthand conditional. It works the same as:

if frame.Visible then
    textButton.Text = "Close"
else
    textButton.Text = "Open"
end

---

Recap

• We created a TextButton.
• Added a Frame as the menu to toggle.
• Used a LocalScript to detect clicks.
• Toggled both the frame’s visibility and the button text.

Now you have a working clickable button that can open and close menus — the same technique used in Roblox for shop menus, settings screens, inventory panels, and more.

---

Next Steps

You can extend this system by: