Reference API Roblox

Engine API

Website

Related

Reference API Roblox

ImageButton

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

Member index 19

HistoryMember
645HoverImage: ContentId
731HoverImageContent: Content
645Image: ContentId
731ImageColor3: Color3
731ImageContent: Content
731ImageRectOffset: Vector2
731ImageRectSize: Vector2
731ImageTransparency: float
731IsLoaded: bool
733LocalizedImageContent: Content
645PressedImage: ContentId
731PressedImageContent: Content
731ResampleMode: ResamplerMode
731ScaleType: ScaleType
731SliceCenter: Rect
731SliceScale: float
731TileSize: UDim2
573SetEnableContentImageSizeChangedEvents(enabled: bool): null
inherited from GuiButton
731AutoButtonColor: bool
731HoverHapticEffect: HapticEffect
731Modal: bool
731PressHapticEffect: HapticEffect
731Selected: bool
731Style: ButtonStyle
483Activated(inputObject: InputObject, clickCount: int)
462MouseButton1Click()
462MouseButton1Down(x: int, y: int)
462MouseButton1Up(x: int, y: int)
462MouseButton2Click()
462MouseButton2Down(x: int, y: int)
462MouseButton2Up(x: int, y: int)
687SecondaryActivated(inputObject: InputObject)
inherited from GuiObject
731Active: bool
731AnchorPoint: Vector2
731AutomaticSize: AutomaticSize
731BackgroundColor3: Color3
731BackgroundTransparency: float
731BorderColor3: Color3
731BorderMode: BorderMode
731BorderSizePixel: int
731ClipsDescendants: bool
731Draggable: bool
731GuiState: GuiState
731InputSink: InputSink
731Interactable: bool
731LayoutOrder: int
731NextSelectionDown: GuiObject
731NextSelectionLeft: GuiObject
731NextSelectionRight: GuiObject
731NextSelectionUp: GuiObject
731Position: UDim2
731Rotation: float
731Selectable: bool
731SelectionImageObject: GuiObject
731SelectionOrder: int
731Size: UDim2
731SizeConstraint: SizeConstraint
731Visible: bool
731ZIndex: int
462TweenPosition(endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
713TweenPositionInternal(endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
462TweenSize(endSize: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
462TweenSizeAndPosition(endSize: UDim2, endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
713TweenSizeAndPositionInternal(endSize: UDim2, endPosition: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
713TweenSizeInternal(endSize: UDim2, easingDirection: EasingDirection = Out, easingStyle: EasingStyle = Quad, time: float = 1, override: bool = false, callback: Function = nil): bool
462DragBegin(initialPosition: UDim2)
462DragStopped(x: int, y: int)
483InputBegan(input: InputObject)
483InputChanged(input: InputObject)
483InputEnded(input: InputObject)
462MouseEnter(x: int, y: int)
462MouseLeave(x: int, y: int)
462MouseMoved(x: int, y: int)
462MouseWheelBackward(x: int, y: int)
462MouseWheelForward(x: int, y: int)
462SelectionGained()
462SelectionLost()
462TouchLongPress(touchPositions: Array, state: UserInputState)
462TouchPan(touchPositions: Array, totalTranslation: Vector2, velocity: Vector2, state: UserInputState)
462TouchPinch(touchPositions: Array, scale: float, velocity: float, state: UserInputState)
462TouchRotate(touchPositions: Array, rotation: float, velocity: float, state: UserInputState)
462TouchSwipe(swipeDirection: SwipeDirection, numberOfTouches: int)
462TouchTap(touchPositions: Array)
inherited from GuiBase2d
731AbsolutePosition: Vector2
731AbsoluteRotation: float
731AbsoluteSize: Vector2
731AutoLocalize: bool
731RootLocalizationTable: LocalizationTable
731SelectionBehaviorDown: SelectionBehavior
731SelectionBehaviorLeft: SelectionBehavior
731SelectionBehaviorRight: SelectionBehavior
731SelectionBehaviorUp: SelectionBehavior
731SelectionGroup: bool
525SelectionChanged(amISelected: bool, previousSelection: GuiObject, newSelection: GuiObject)
inherited from Instance
731Archivable: bool
731Capabilities: SecurityCapabilities
731IsInSandbox: bool
731Name: string
731Parent: Instance
731PredictionMode: PredictionMode
731Sandboxed: bool
731UniqueId: UniqueId
576AddTag(tag: string): null
573ClearAllChildren(): null
462Clone(): Instance
573Destroy(): null
486FindFirstAncestor(name: string): Instance
486FindFirstAncestorOfClass(className: string): Instance
486FindFirstAncestorWhichIsA(className: string): Instance
486FindFirstChild(name: string, recursive: bool = false): Instance
486FindFirstChildOfClass(className: string): Instance
486FindFirstChildWhichIsA(className: string, recursive: bool = false): Instance
486FindFirstDescendant(name: string): Instance
563GetActor(): Actor
486GetAttribute(attribute: string): Variant
462GetAttributeChangedSignal(attribute: string): RBXScriptSignal
631GetAttributes(): Dictionary
648GetChildren(): Instances
462GetDebugId(scopeLength: int = 4): string
707GetDescendants(): Instances
486GetFullName(): string
706GetStyled(name: string, selector: string?): Variant
657GetStyledPropertyChangedSignal(property: string): RBXScriptSignal
576GetTags(): Array
576HasTag(tag: string): bool
486IsAncestorOf(descendant: Instance): bool
486IsDescendantOf(ancestor: Instance): bool
664IsPropertyModified(property: string): bool
698QueryDescendants(selector: string): Instances
573Remove(): null
576RemoveTag(tag: string): null
664ResetPropertyToDefault(property: string): null
573SetAttribute(attribute: string, value: Variant): null
462WaitForChild(childName: string, timeOut: double): Instance
731children(): Instances
731clone(): Instance
731destroy(): null
731findFirstChild(name: string, recursive: bool = false): Instance
731getChildren(): Instances
731isDescendantOf(ancestor: Instance): bool
731remove(): null
462AncestryChanged(child: Instance, parent: Instance)
462AttributeChanged(attribute: string)
462ChildAdded(child: Instance)
462ChildRemoved(child: Instance)
462DescendantAdded(descendant: Instance)
462DescendantRemoving(descendant: Instance)
500Destroying()
657StyledPropertiesChanged()
731childAdded(child: Instance)
inherited from Object
731ClassName: string
731className: string
647GetPropertyChangedSignal(property: string): RBXScriptSignal
647IsA(className: string): bool
731isA(className: string): bool
647Changed(property: string)

Description

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

History 106

Members 19

HoverImage

TypeDefault
ContentId

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

History 4

HoverImageContent

TypeDefault
Content

An image-type Content that can be set as an ImageButton property. When the button is hovered, it will render this image. Only asset URIs are supported for this property.

History 3

Image

TypeDefault
ContentId

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.

History 4

ImageColor3

TypeDefault
Color31, 1, 1

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.

History 6

ImageContent

TypeDefault
Content

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.

History 7

ImageRectOffset

TypeDefault
Vector20, 0

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.

History 6

ImageRectSize

TypeDefault
Vector20, 0

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.

History 6

ImageTransparency

TypeDefault
float0

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.

History 6

IsLoaded

TypeDefault
boolfalse

This property indicates if the Image property has finished loading from Roblox. Images declined by moderation will never load.

This property is not replicated. Its interface does not cross the network boundary.
This property is read-only. Its value can be read, but it cannot be modified.

History 6

Tags: [ReadOnly, NotReplicated]

LocalizedImageContent

TypeDefault
Content
This property is not replicated. Its interface does not cross the network boundary.
This property is read-only. Its value can be read, but it cannot be modified.

History 1

Tags: [ReadOnly, NotReplicated]

PressedImage

TypeDefault
ContentId

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

History 4

PressedImageContent

TypeDefault
Content

An image-type Content that can be set as an ImageButton property. When the button is pressed, it will render this image. Only asset URIs are supported for this property.

History 3

ResampleMode

TypeDefault
ResamplerModeDefault

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.

History 4

ScaleType

TypeDefault
ScaleTypeStretch

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.

History 8

SetEnableContentImageSizeChangedEvents

Parameters (1)
enabledbool
Returns (1)
null

History 2

SliceCenter

TypeDefault
Rect0, 0, 0, 0

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.

History 8

SliceScale

TypeDefault
float1

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.

History 16

TileSize

TypeDefault
UDim2{1, 0}, {1, 0}

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.

History 6

Settings