> For the complete documentation index, see [llms.txt](https://docs.overdare.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.overdare.com/development/api-reference/classes/imagebutton.md). # ImageButton ImageButton : `GuiButton` ## Overview ImageButton displays image just like ImageLabel, but it adds interactable buttons. In other words, it is a UI element that displays image as well as uses the events of GuiButton like click and tap. ImageButton can be controlled only in **client environment**. ## Properties ### ContentImageSize `Vector2` A read-only property that indicates, in pixels, the size of the original image specified in Image. It is (0, 0) if the image has not been loaded yet. When Image is changed, it returns to (0, 0) until the new image is loaded. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") print("ContentImageSize : ", ImageButton.ContentImageSize) ``` ### HoverImage `string` Specifies image asset to be displayed when the mouse cursor is hovering on ImageButton. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.HoverImage = "ovdrassetid://1234" ``` ### Image `string` Specifies image asset to be displayed in ImageButton. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.Image = "ovdrassetid://1234" ``` ### ImageColor3 `Color3` Specifies the color to be applied to image. If color is left white, original image will be displayed. If some other color is specified, the whole image will be in that hue. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ImageColor3 = Color3.fromRGB(255, 0, 0) ``` ### ImageRectOffset `Vector2` Specifies, in pixels, the top-left starting position of the area to display from the original image. When used together with ImageRectSize, you can display only the desired part of a single image that contains several icons (a sprite sheet). #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ImageRectOffset = Vector2.new(64, 0) ImageButton.ImageRectSize = Vector2.new(64, 64) ``` ### ImageRectSize `Vector2` Specifies, in pixels, the size of the area to display from the original image. The starting position of the area to display is specified with ImageRectOffset. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ImageRectOffset = Vector2.new(0, 0) ImageButton.ImageRectSize = Vector2.new(128, 128) ``` ### ImageTransparency `number` Specifies the transparency of image. 0 means the image is completely opaque while 1 means the image is totally invisible. If background needs to be hidden while image is displayed, set BackgroundTransparency to 1. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ImageTransparency = 0.5 ``` ### IsLoaded `boolean` A read-only property that indicates whether the image specified in Image has been loaded and can be displayed. When Image is changed, it becomes false until the new image is loaded. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") print("IsLoaded : ", ImageButton.IsLoaded) ``` ### PressedImage `string` Specifies the Asset Id of the image to display while the button is being pressed. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.PressedImage = "ovdrassetid://1234" ``` ### ResampleMode `Enum.ResamplerMode` Specifies how pixels are interpolated when the image is displayed at a size different from the original. * `Default`: Smoothly interpolates between pixels. * `Pixelated`: Keeps pixel boundaries as they are without interpolation. Suitable for images that need sharp edges, such as pixel art. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ResampleMode = Enum.ResamplerMode.Pixelated ``` ### ScaleType `Enum.ScaleType` Specifies how the image is scaled when the size of the UI element differs from the original image. * `Stretch`: Stretches the image to fit the element. This is the default value. * `Slice`: Divides the image into nine regions and applies a different scaling rule to each region. The slice boundaries are determined by SliceCenter. * `Tile`: Repeats the image in tiles of the TileSize size. * `Fit`: Scales the image to fit entirely inside the element while keeping its original aspect ratio. * `Crop`: Scales the image to fill the element while keeping its original aspect ratio, and cuts off the parts outside the element. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ScaleType = Enum.ScaleType.Slice ``` ### SliceCenter `Rect` Specifies the slice boundaries of the nine regions when ScaleType is Slice. The value is an absolute pixel coordinate based on the top-left corner (0, 0) of the image, and consists of the top-left point Min and the bottom-right point Max. In the Properties window, it is displayed as four fields X0, Y0, X1, and Y1, which correspond to Min.X, Min.Y, Max.X, and Max.Y. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ScaleType = Enum.ScaleType.Slice ImageButton.SliceCenter = Rect.new(10, 10, 118, 118) ``` ### SliceScale `number` Specifies the scale factor applied to the slice edges when ScaleType is Slice. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton= ScreenGui:WaitForChild("ImageButton") ImageButton.ScaleType = Enum.ScaleType.Slice ImageButton.SliceScale = 2 ``` ### TileSize `UDim2` Specifies the size of a single tile to be displayed repeatedly when ScaleType is Tile. Scale is a ratio to the size of the UI element, and Offset is in pixels. #### Code Samples ```lua local ScreenGui = script.Parent local ImageButton = ScreenGui:WaitForChild("ImageButton") ImageButton.ScaleType = Enum.ScaleType.Tile ImageButton.TileSize = UDim2.new(0, 32, 0, 32) ``` ## Methods ## Events ## See also