Text & Image Buttons

Buttons are GuiObjects that allow users to perform an action. You can customize buttons to provide context and feedback, such as changing the visual appearance or scripting audible feedback when a user clicks a button.

There are two types of buttons which you can place on‑screen or in‑experience:

• A TextButton is a rectangle with text that triggers the Activated event on click/tap.

• An ImageButton is a rectangle with an image that triggers the Activated event on click/tap. It features additional states for swapping the image on user hover or press.

Creating Buttons on the Screen

Buttons on a screen are useful to quickly guide users to various menus or pages.

To add a button to the screen:

1. In the Explorer window, select StarterGui and add a ScreenGui.

   1. Hover over StarterGui and click the ⊕ button. A contextual menu displays.

   2. Insert a ScreenGui.

2. Select the new ScreenGui and add a button.

   1. Hover over ScreenGui and click the ⊕ button. A contextual menu displays.

   2. Insert either a TextButton or ImageButton.

   

Creating Buttons on Part Faces

Buttons on a part are useful for allowing users to interact with parts. For example, you can let users step on a button to complete an action.

To add a button to the face of a part:

1. In the Explorer window, select the part and add a SurfaceGui.

   1. Hover over the part and click the ⊕ button. A contextual menu displays.

   2. Insert a SurfaceGui.

2. Select the new SurfaceGui and add any type of button or input.

   1. Hover over SurfaceGui and click the ⊕ button. A contextual menu displays.

   2. Insert either a TextButton or ImageButton.

   

   If you don't see the button, try choosing a different face in the Face property of the SurfaceGui.

Changing the Appearance of an ImageButton

Changing the appearance of an ImageButton when a user is interacting with it provides useful visual feedback. For example, when an ImageButton changes visual appearance when a user hovers over it, it lets the user know that it isn't disabled and that they have the option to click it if they want to perform that ImageButton action.

An ImageButton has three properties to change its visual appearance:

• Image - The image that displays when a user is not interacting with the ImageButton.

• HoverImage - The image that displays when a user is hovering their cursor over the ImageButton.

• PressedImage - The image that displays when a user is clicking the ImageButton.

To change the appearance of an ImageButton with user input:

1. Add an ImageButton to a screen or a surface.

2. In the Explorer window, click the ImageButton object.

3. In the Properties window, assign three different respective asset IDs for the Image, HoverImage, and PressedImage properties.

Scripting Buttons

You can script an action when a user presses a button by connecting the button to a GuiButton.Activated event. For example, when you parent the following LocalScript to a button, the button changes to a random color every time a user clicks it.

local button = script.Parent
local RNG = Random.new()
local function onButtonActivated()
	-- randomize the button color
	button.BackgroundColor3 = Color3.fromHSV(RNG:NextNumber(), 1, 1)
end
button.Activated:Connect(onButtonActivated)