Reference API Roblox

Engine API

Website

Related

Reference API Roblox

ImageButton

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

Member index 16

HistoryMember
645HoverImage: ContentId
645Image: ContentId
553ImageColor3: Color3
553ImageRectOffset: Vector2
553ImageRectSize: Vector2
553ImageTransparency: float
553IsLoaded: bool
645PressedImage: ContentId
553ResampleMode: ResamplerMode
553ScaleType: ScaleType
553SliceCenter: Rect
553SliceScale: float
553TileSize: UDim2
573SetEnableContentImageSizeChangedEvents(enabled: bool): null
inherited from GuiButton
553AutoButtonColor: bool
553Modal: bool
578Selected: bool
553Style: 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)
inherited from GuiObject
553Active: bool
553AnchorPoint: Vector2
553AutomaticSize: AutomaticSize
553BackgroundColor3: Color3
553BackgroundTransparency: float
553BorderColor3: Color3
553BorderMode: BorderMode
553BorderSizePixel: int
553ClipsDescendants: bool
553Draggable: bool
588GuiState: GuiState
589Interactable: bool
553LayoutOrder: int
553NextSelectionDown: GuiObject
553NextSelectionLeft: GuiObject
553NextSelectionRight: GuiObject
553NextSelectionUp: GuiObject
553Position: UDim2
553Rotation: float
553Selectable: bool
553SelectionImageObject: GuiObject
553SelectionOrder: int
553Size: UDim2
553SizeConstraint: SizeConstraint
553Visible: bool
553ZIndex: int
462TweenPosition(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
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
553AbsolutePosition: Vector2
553AbsoluteRotation: float
553AbsoluteSize: Vector2
553AutoLocalize: bool
553RootLocalizationTable: LocalizationTable
553SelectionBehaviorDown: SelectionBehavior
553SelectionBehaviorLeft: SelectionBehavior
553SelectionBehaviorRight: SelectionBehavior
553SelectionBehaviorUp: SelectionBehavior
553SelectionGroup: bool
525SelectionChanged(amISelected: bool, previousSelection: GuiObject, newSelection: GuiObject)
inherited from Instance
553Archivable: bool
635Capabilities: SecurityCapabilities
553Name: string
553Parent: Instance
635Sandboxed: bool
616UniqueId: 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
486GetDescendants(): Array
486GetFullName(): string
641GetStyled(name: string): Variant
576GetTags(): Array
576HasTag(tag: string): bool
486IsAncestorOf(descendant: Instance): bool
486IsDescendantOf(ancestor: Instance): bool
580IsPropertyModified(name: string): bool
573Remove(): null
576RemoveTag(tag: string): null
580ResetPropertyToDefault(name: string): null
573SetAttribute(attribute: string, value: Variant): null
462WaitForChild(childName: string, timeOut: double): Instance
648children(): Instances
553clone(): Instance
573destroy(): null
553findFirstChild(name: string, recursive: bool = false): Instance
648getChildren(): Instances
553isDescendantOf(ancestor: Instance): bool
573remove(): null
462AncestryChanged(child: Instance, parent: Instance)
462AttributeChanged(attribute: string)
462ChildAdded(child: Instance)
462ChildRemoved(child: Instance)
462DescendantAdded(descendant: Instance)
462DescendantRemoving(descendant: Instance)
500Destroying()
553childAdded(child: Instance)
inherited from Object
647ClassName: string
647className: string
647GetPropertyChangedSignal(property: string): RBXScriptSignal
647IsA(className: string): bool
650isA(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. 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.

History 74

Members 16

HoverImage

TypeDefault
ContentId

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

History 4

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

History 4

ImageColor3

TypeDefault
Color31, 1, 1

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.

History 4

ImageRectOffset

TypeDefault
Vector20, 0

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.

History 4

ImageRectSize

TypeDefault
Vector20, 0

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.

History 4

ImageTransparency

TypeDefault
float0

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.

History 4

IsLoaded

TypeDefault
boolfalse

The IsLoaded property indicates if the ImageButton.Image property finished loading from the Roblox website. 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 4

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

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 2

ScaleType

TypeDefault
ScaleTypeStretch

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.

History 6

SetEnableContentImageSizeChangedEvents

Parameters (1)
enabledbool
Returns (1)
null

History 2

SliceCenter

TypeDefault
Rect0, 0, 0, 0

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.

History 6

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

Scaling example

See also:

History 14

TileSize

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

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.

History 4

Settings