ImageButton

Show Deprecated

An ImageButton behaves similarly to an ImageLabel in regards to rendering, with the additional behaviors of a GuiButton.

Summary

Properties

Properties inherited from GuiButton
  • AutoButtonColor:bool
    Read Parallel

    Determines whether the button automatically changes color when the mouse hovers over or clicks on it.

  • Modal:bool
    Read Parallel

    If true while the GUI element is visible, the mouse will not be locked unless the right mouse button is down.

  • Selected:bool
    Read Parallel

    A boolean property which indicates whether the object has been selected.

  • Style:Enum.ButtonStyle
    Read Parallel

    Sets the style of the GuiButton based on a list of pre-determined styles.

Properties inherited from GuiObjectProperties inherited from GuiBase2d
View all inherited from Instance
View all inherited from Object

Methods

Methods inherited from GuiObject
View all inherited from Instance
View all inherited from Object

Events

Events inherited from GuiButtonEvents inherited from GuiObjectEvents inherited from GuiBase2d
View all inherited from Instance
View all inherited from Object

Properties

HoverImage

ContentId
Read Parallel

A texture ID that will be used when the ImageButton is being hovered.

Image

ContentId
Read Parallel

This property is a content-type property that should hold the asset ID of a decal or image uploaded to Roblox. It functions identically to Decal.Texture with regards to loading the image from Roblox. The rendered image will be colorized using ImageColor3.

Note that it is possible to make the image render as tiled, scaled to fit, or 9-sliced by adjusting the 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

Color3
Read Parallel

This 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()

ImageContent

Content
Hidden
Read Parallel

This property should hold an asset URI or a reference to an EditableImage object. The asset URI can reference a decal or image uploaded to Roblox. It functions identically to Decal.Texture with regards to loading the image.

The rendered image will be colorized using ImageColor3. It is possible to make the image render as tiled, scaled to fit, or 9‑sliced by adjusting the ScaleType property.

ImageRectOffset

Vector2
Read Parallel

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

Code Samples

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

Vector2
Read Parallel

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

Code Samples

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

number
Read Parallel

This property determines the alpha of the 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.

If you disable image rendering by setting ImageTransparency to 1, it will result in a plain rectangle that can be used as a button. However, it may be better to use a blank TextButton instead.

IsLoaded

bool
Read Only
Not Replicated
Read Parallel

This property indicates if the Image property has finished loading from Roblox. 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

ContentId
Read Parallel

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

ResampleMode

Enum.ResamplerMode
Read Parallel

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

Enum.ScaleType
Read Parallel

This property determines in what way the Image property 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 Roblox, transparent images should apply alpha blending to avoid a blackish outline around scaled images.

For Enum.ScaleType.Slice, 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. To learn more about 9‑sliced images, see UI 9‑Slice Design.

For Enum.ScaleType.Tile, the size of each image tile is determined by the TileSize property.

SliceCenter

Rect
Read Parallel

This property sets the slice boundaries of a 9-sliced image when ScaleType is set to Enum.ScaleType.Slice.

To learn more about 9‑sliced images, see UI 9‑Slice Design.

SliceScale

number
Read Parallel

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.

See also ScaleType which determines how an image will scale if displayed in a UI element whose size differs from the source image.

TileSize

UDim2
Read Parallel

Sets the tiling size of the ImageButton starting at the upper-left corner of the image. The default UDim2 values are 1, 0, 1, 0; the scale components of the UDim2 will scale the tile based on the size of the ImageButton while the offset components are in raw pixels. For example, a scale of 0.5 means the tile will be half the size of the ImageButton in the corresponding axis.

This property is only active if the ScaleType property is set to Enum.ScaleType.Tile.

View all inherited from Instance
View all inherited from Object

Methods

View all inherited from Instance
View all inherited from Object

Events

View all inherited from Instance
View all inherited from Object