Skip to content

ImageButton

Supported Class GUI

A 2D user interface element that displays an interactive image.

10 Nova members · 8 modern Roblox members not implemented yet

Description

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

Inheritance

Object → Instance → GuiBase → GuiBase2d → GuiObject → GuiButton → ImageButton

Nova inheritance: Instance → GuiBase → GuiBase2d → GuiObject → GuiButton → ImageButton

Properties

Image Supported Property The image content displayed by the ImageButton element. Reads and writes to ImageContent.
Image: Content

The image content displayed by the ImageButton element. Reads and writes to ImageContent.

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.

Roblox reference signature
Image: ContentId

Roblox documentation

ImageColor3 Supported Property Determines how a rendered image will be colorized.
ImageColor3: Color3

Determines how a rendered image will be colorized.

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.

Roblox documentation

ImageRectOffset Supported Property The offset in pixels of the sub-area of an image to be displayed.
ImageRectOffset: Vector2

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

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.

Roblox documentation

ImageRectSize Supported Property Determines the size in pixels of the sub-area of an image to be displayed.
ImageRectSize: Vector2

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

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.

Roblox documentation

ImageTransparency Supported Property Determines the transparency of the rendered image.
ImageTransparency: float

Determines the transparency of the rendered image.

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.

Roblox documentation

ResampleMode Supported Property Selects the image resampling mode for the button.
ResampleMode: ResamplerMode

Selects the image resampling mode for the button.

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.

Roblox documentation

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

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

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 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 ScaleType.Tile, the size of each image tile is determined by the TileSize property.

Roblox documentation

SliceCenter Supported Property Sets the slice boundaries of a 9-sliced image.
SliceCenter: Rect2D

Sets the slice boundaries of a 9-sliced image.

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.

Roblox reference signature
SliceCenter: Rect

Roblox documentation

SliceScale Supported Property Scales the 9-slice edges by the specified ratio.
SliceScale: float

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.

Roblox documentation

TileSize Supported Property Sets the tiling scale of the ImageButton.
TileSize: UDim2

Sets the tiling scale of the ImageButton.

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 ScaleType.Tile.

Roblox documentation

Inherited members

Inherited from GuiButton: 49 properties, 40 methods, 31 events. They are documented on the base class page.

8 modern Roblox member(s) are not implemented yet — expand to inspect

Members declared by Roblox's ImageButton class (or by a missing base class) that Nova does not expose. Use this list to scope a migration; the compatibility guide has the recommended workaround.

Properties

Member Signature Status Notes Flags
HoverImage HoverImage: ContentId Not yet A texture ID that will be used when the ImageButton is being hovered. —
HoverImageContent HoverImageContent: Content Not yet The image content that will be used when the ImageButton is being hovered. Only supports asset URIs. —
ImageContent ImageContent: Content Not yet The image content displayed by the UI element. Supports asset URIs and EditableImage objects. —
IsLoaded IsLoaded: bool Not yet Indicates whether the Image has finished loading from the Roblox website. ReadOnly, NotReplicated
LocalizedImageContent LocalizedImageContent: Content Not yet — ReadOnly, NotReplicated, RobloxScriptSecurity
PressedImage PressedImage: ContentId Not yet A texture ID that will be used when an ImageButton is being pressed. —
PressedImageContent PressedImageContent: Content Not yet The image content that will be used when an ImageButton is being pressed. Only supports asset URIs. —

Methods

Member Signature Status Notes Flags
SetEnableContentImageSizeChangedEvents ImageButton:SetEnableContentImageSizeChangedEvents(enabled: bool): null Not yet — RobloxScriptSecurity

Roblox reference: ImageButton

Generated from Nova's API dump and Roblox creator-docs. Nova-only members come from the engine's reflection metadata.