ImageButton

Show Deprecated

An ImageButton behaves similarly to an ImageLabel in regards to rendering with the additional behaviors of a GuiButton. It defines the same image-rendering properties as a ImageLabel does.

You can disable image rendering by setting ImageButton.ImageTransparency to 1. This will leave you with a plain rectangle that can be used as a button. However, it may be better to use a blank TextButton for this.

Code Samples

ImageButton Press Color

-- Place this code in a LocalScript in an ImageButton
local imageButton = script.Parent
local colorNormal = Color3.new(1, 1, 1) -- white
local colorHover = Color3.new(0, 1, 0) -- green
local colorPress = Color3.new(1, 0, 0) -- red
-- This is a 32x32 image of a backpack
imageButton.Image = "rbxassetid://787458668"
imageButton.BackgroundTransparency = 1
local function onActivated()
print("open the inventory")
end
local function onPressed()
imageButton.ImageColor3 = colorPress
end
local function onReleased()
imageButton.ImageColor3 = colorHover
end
local function onEntered()
imageButton.ImageColor3 = colorHover
end
local function onLeft()
imageButton.ImageColor3 = colorNormal
end
imageButton.MouseEnter:Connect(onEntered)
imageButton.MouseLeave:Connect(onLeft)
imageButton.MouseButton1Down:Connect(onPressed)
imageButton.MouseButton1Up:Connect(onReleased)
imageButton.Activated:Connect(onActivated)
-- Start with the default, non-hovered state
onLeft()

Summary

Properties

A textureId that will be used when ImageButton is being hovered.

The image content displayed by the UI element.

Determines how a rendered image will be colorized.

The offset in pixels of the sub-area of an image to be displayed.

Determines the size in pixels of the sub-area of an image to be displayed.

Determines the transparency of the rendered image.

Indicates whether the Image has finished loading from the Roblox website.

READ ONLY
NOT REPLICATED

A textureId that will be used when an ImageButton is being pressed.

Selects the image resampling mode for the button.

Determines how an image will scale if displayed in a UI element whose size differs from the source image.

Sets the slice boundaries of a 9-sliced image.

Scales the 9-slice edges by the specified ratio.

Sets the tiling scale of the ImageButton.

Methods

Events

Properties

HoverImage

A textureId that could be set on the ImageButton's properties. When the button is hovered, it will render HoverImage if specified.

Image

The Image property is a content-type property that should hold the asset ID of a Decal or Image on the Roblox website. It functions identically to Decal.Texture with regards to loading the image from the Roblox website. The rendered image will be colorized using ImageButton.ImageColor3. It is possible to make the image render as tiled, scaled to fit, or 9-sliced, by adjusting the ImageButton.ScaleType property.

Code Samples

Image Hover Lock

local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()

ImageColor3

The ImageColor3 property determines how an image is colorized. When set to white, no colorization occurs. This property is very useful for reusing image assets: If the source image is completely white with transparency, you can set the entire color of the image at once with this property.

Code Samples

Image Hover Lock

local imageLabel = script.Parent
-- The images in this example are 64x64
imageLabel.Size = UDim2.new(0, 64, 0, 64)
local function unlock()
imageLabel.Image = "rbxassetid://284402785" -- Unlocked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0, 0.5, 0) -- Dark green
end
local function lock()
imageLabel.Image = "rbxassetid://284402752" -- Locked padlock (64x64)
imageLabel.ImageColor3 = Color3.new(0.5, 0, 0) -- Dark red
end
-- Connect events; our default state is locked
imageLabel.MouseEnter:Connect(unlock)
imageLabel.MouseLeave:Connect(lock)
lock()
Rainbow Image

local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
imageLabel.ImageColor3 = Color3.fromHSV(workspace.DistributedGameTime / 8 % 1, 1, 1)
end
RunService.RenderStepped:Connect(onRenderStep)

ImageRectOffset

Allows the partial display of an image in conjunction with ImageButton.ImageRectSize. This property determines the pixel offset (from the top-left) of the image area to be displayed.

This property behaves identically to ImageLabel.ImageRectSize.

Code Samples

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end
Image Animation using Spritesheet

-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
end

ImageRectSize

Allows the partial display of an image in conjunction with ImageButton.ImageRectOffset. This property determines the pixel size of the image area to be displayed. If either dimension is set to 0, the entire image is displayed instead.

This property behaves identically to ImageLabel.ImageRectOffset.

Code Samples

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end
Image Animation using Spritesheet

-- Place this in an ImageLabel/ImageButton with size 256x256
local imageLabel = script.Parent
-- The following image is 1024x1024 with 12 frames (256x256)
-- The frames play an animation of a man throwing a punch
imageLabel.Image = "rbxassetid://848623155"
imageLabel.ImageRectSize = Vector2.new(256, 256)
-- The order of the frames to be displayed (left-to-right, then top-to-bottom)
local frames = {
Vector2.new(0, 0),
Vector2.new(1, 0),
Vector2.new(2, 0),
Vector2.new(3, 0),
Vector2.new(0, 1),
Vector2.new(1, 1),
Vector2.new(2, 1),
Vector2.new(3, 1),
Vector2.new(0, 2),
Vector2.new(1, 2),
Vector2.new(2, 2),
Vector2.new(3, 2),
}
-- Animate the frames one at a time in a loop
while true do
for _, frame in ipairs(frames) do
imageLabel.ImageRectOffset = frame * imageLabel.ImageRectSize
task.wait(0.1)
end
end

ImageTransparency

ImageTransparency determines the alpha of a UI element's rendered image. A value of 0 is completely opaque, and a value of 1 is completely transparent (invisible). This property behaves similarly to GuiObject.BackgroundTransparency or BasePart.Transparency.

Code Samples

Oscillate ImageTransparency

local RunService = game:GetService("RunService")
local imageLabel = script.Parent
local function onRenderStep()
-- Oscillate ImageTransparency from 0 to 1 using a sine wave
imageLabel.ImageTransparency = math.sin(workspace.DistributedGameTime * math.pi) * 0.5 + 0.5
end
RunService.RenderStepped:Connect(onRenderStep)

IsLoaded

Read Only
Not Replicated

The IsLoaded property indicates if the ImageButton.Image property finished loading from the Roblox website. Images declined by moderation will never load.

Code Samples

Image Load Time

local imageLabel = script.Parent
local startTime = workspace.DistributedGameTime
-- Wait for the image to load
while not imageLabel.IsLoaded do
task.wait()
end
-- Measure and display how long it took to load
local deltaTime = workspace.DistributedGameTime - startTime
print(("Image loaded in %.3f seconds"):format(deltaTime))

PressedImage

A texture ID that can be set as an ImageButton property. When the button is pressed, it will render this image.

ResampleMode

Determines how the image looks when it is scaled.

By default, the image smooths out the texture when displayed either larger or smaller than its size in texture memory. In contrast, Enum.ResamplerMode.Pixelated preserves the sharp edges of the image pixels.

ScaleType

The ScaleType property determines in what way an ImageButton.Image is rendered when the UI element's absolute size differs from the source image's size.

By default, this property is Enum.ScaleType.Stretch, which will simply stretch/compact the image dimensions so it fits the UI element's space exactly. Since transparent pixels are set to black when uploading to the Roblox website, transparent images should apply alpha blending to avoid a blackish outline around scaled images.

For Enum.ScaleType.Slice, the ImageButton.SliceCenter property will be revealed in the Properties window. This is for 9-slice UI: when scaling up, the corners will remain the source image size. The edges of the image will stretch to the width/height of the image. Finally, the center of the image will stretch to fill the center area of the image.

Finally, for Enum.ScaleType.Tile, the ImageButton.TileSize property will be revealed in the Properties window. This is for tiled images, where the size of each image tile is determined by the ImageButton.TileSize property.

Code Samples

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

SliceCenter

The SliceCenter property sets the slice boundaries of a 9-sliced image when ImageButton.ScaleType is set to Enum.ScaleType.Slice. Please note that this property is only visible in the Studio Properties Pane if ImageButton.ScaleType is set to Enum.ScaleType.Slice. Select this property and click the "..." button to open the 9-Slice Editor, a built-in visual editor for setting the slice boundaries.

To learn more about 9-sliced images, check out this tutorial: UI 9 Slice Design.

Code Samples

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

SliceScale

Scales the 9-slice edges by the specified ratio. This means that the edges around the 9-slice will grow as if you'd uploaded a new version of the texture upscaled. Defaults to 1.0.

As a multiplier for the borders of a 9-slice, it is useful for reusing one rounded corner image for multiple radii

Scaling example

See also:

TileSize

TileSize sets the tiling size of the ImageButton. The default UDim2 values are 1,0,1,0. The scale component of the UDim2 will scale the tile based on the size of the ImageButton. The offset is in raw pixels. The tiling starts at the upper left-hand corner of the image. For example a scale of 0.5 will mean the tile will be half the size of the ImageButton (in the corresponding axis).

This property is only active if the ScaleType for the ImageButton is set to Tile instead of Slice or Stretch.

Code Samples

Image ScaleType Demo

local imageLabel = script.Parent
-- Set the source image to be a 64x64 padlock
imageLabel.Image = "rbxassetid://284402752"
imageLabel.BackgroundTransparency = 0
imageLabel.BackgroundColor3 = Color3.new(1, 1, 1) -- White
imageLabel.ImageColor3 = Color3.new(0, 0, 0) -- Black
local function resizeInACircle()
for theta = 0, 2, 0.02 do
imageLabel.Size = UDim2.new(
0,
100 + math.cos(theta * 2 * math.pi) * 50,
0,
100 + math.sin(theta * 2 * math.pi) * 50
)
task.wait()
end
end
while true do
-- Stretch simply stretches the source image to fit
-- the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Stretch
resizeInACircle()
-- Tile will render the source image multiple times
-- enough to fill the UI element's space
imageLabel.ScaleType = Enum.ScaleType.Tile
imageLabel.TileSize = UDim2.new(0, 64, 0, 64)
resizeInACircle()
-- Slice will turn the image into a nine-slice UI.
imageLabel.ScaleType = Enum.ScaleType.Slice
imageLabel.SliceCenter = Rect.new(30, 30, 34, 34)
resizeInACircle()
end

Methods

SetEnableContentImageSizeChangedEvents

void
Roblox Script Security

Parameters

enabled: boolean

Returns

void

Events