# This file is automatically generated. Please don't edit it manually.
# To submit a bug report on the content, see
# https://devforum.roblox.com/c/bug-reports/documentation-issues/72

name: ImageButton
type: class
memory_category: Gui
summary: |
  A 2D user interface element that displays an interactive image.
description: |
  An `Class.ImageButton` behaves similarly to an `Class.ImageLabel` in regards
  to rendering, with the additional behaviors of a `Class.GuiButton`.
code_samples: []
inherits:
  - GuiButton
descendants: []
tags: []
deprecation_message: ''
properties:
  - name: ImageButton.HoverImage
    summary: |
      A texture ID that will be used when the `Class.ImageButton` is being
      hovered.
    description: |
      A texture ID that will be used when the `Class.ImageButton` is being
      hovered.
    code_samples: []
    type: ContentId
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.HoverImageContent
    summary: |
      The image content that will be used when the `Class.ImageButton` is being
      hovered. Only supports asset URIs.
    description: |
      An image-type Content that can be set as an `Class.ImageButton` property.
      When the button is hovered, it will render this image. Only asset URIs are
      supported for this property.
    code_samples: []
    type: Content
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.Image
    summary: |
      The image content displayed by the `Class.ImageButton` element. Reads and
      writes to `Class.ImageButton.ImageContent|ImageContent`.
    description: |
      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
      `Class.Decal.Texture` with regards to loading the image from Roblox. The
      rendered image will be colorized using
      `Class.ImageButton.ImageColor3|ImageColor3`.

      Note that it is possible to make the image render as tiled, scaled to fit,
      or 9-sliced by adjusting the `Class.ImageButton.ScaleType|ScaleType`
      property.
    code_samples:
      - Image-Hover-Lock
    type: ContentId
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ImageColor3
    summary: |
      Determines how a rendered image will be colorized.
    description: |
      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
    type: Color3
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ImageContent
    summary: |
      The image content displayed by the UI element. Supports asset URIs and
      `Class.EditableImage` objects.
    description: |
      This property should hold an
      [asset URI](../../../projects/assets/index.md#asset-uris) or a reference
      to an `Class.EditableImage` object. The asset URI can reference a decal or
      image uploaded to Roblox. It functions identically to
      `Class.Decal.Texture` with regards to loading the image.

      The rendered image will be colorized using
      `Class.ImageButton.ImageColor3|ImageColor3`. It is possible to make the
      image render as tiled, scaled to fit, or 9‑sliced by adjusting the
      `Class.ImageButton.ScaleType|ScaleType` property.
    code_samples: []
    type: Content
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ImageRectOffset
    summary: |
      The offset in pixels of the sub-area of an image to be displayed.
    description: |
      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 `Class.ImageButton.ImageRectSize|ImageRectSize`.
    code_samples:
      - Image-Animation-using-Spritesheet
    type: Vector2
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ImageRectSize
    summary: |
      Determines the size in pixels of the sub-area of an image to be displayed.
    description: |
      This property determines the pixel size of the image area to be displayed,
      allowing for the partial display of an image in conjunction with
      `Class.ImageButton.ImageRectOffset|ImageRectOffset`. If either dimension
      is set to `0`, the entire image is displayed instead.
    code_samples:
      - Image-Animation-using-Spritesheet
    type: Vector2
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ImageTransparency
    summary: |
      Determines the transparency of the rendered image.
    description: |
      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
      `Class.GuiObject.BackgroundTransparency` or `Class.BasePart.Transparency`.

      If you disable image rendering by setting
      `Class.ImageButton.ImageTransparency|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 `Class.TextButton` instead.
    code_samples: []
    type: float
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.IsLoaded
    summary: |
      Indicates whether the Image has finished loading from the Roblox website.
    description: |
      This property indicates if the `Class.ImageButton.Image|Image` property
      has finished loading from Roblox. Images declined by moderation will never
      load.
    code_samples:
      - Image-Load-Time
    type: boolean
    tags:
      - ReadOnly
      - NotReplicated
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: false
      can_save: false
    capabilities:
      - UI
  - name: ImageButton.PressedImage
    summary: |
      A texture ID that will be used when an `Class.ImageButton` is being
      pressed.
    description: |
      A texture ID that can be set as an `Class.ImageButton` property. When the
      button is pressed, it will render this image.
    code_samples: []
    type: ContentId
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.PressedImageContent
    summary: |
      The image content that will be used when an `Class.ImageButton` is being
      pressed. Only supports asset URIs.
    description: |
      An image-type Content that can be set as an `Class.ImageButton` property.
      When the button is pressed, it will render this image. Only asset URIs are
      supported for this property.
    code_samples: []
    type: Content
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ResampleMode
    summary: |
      Selects the image resampling mode for the button.
    description: |
      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|Enum.ResamplerMode.Pixelated` preserves the
      sharp edges of the image pixels.
    code_samples: []
    type: ResamplerMode
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.ScaleType
    summary: |
      Determines how an image will scale if displayed in a UI element whose size
      differs from the source image.
    description: |
      This property determines in what way the `Class.ImageButton.Image|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|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](../../../ui/9-slice.md).

      For `Enum.ScaleType.Tile`, the size of each image tile is determined by
      the `Class.ImageButton.TileSize|TileSize` property.
    code_samples: []
    type: ScaleType
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.SliceCenter
    summary: |
      Sets the slice boundaries of a 9-sliced image.
    description: |
      This property sets the slice boundaries of a 9-sliced image when
      `Class.ImageButton.ScaleType|ScaleType` is set to
      `Enum.ScaleType.Slice|Enum.ScaleType.Slice`.

      To learn more about 9‑sliced images, see
      [UI 9‑Slice Design](../../../ui/9-slice.md).
    code_samples: []
    type: Rect
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.SliceScale
    summary: |
      Scales the 9-slice edges by the specified ratio.
    description: |
      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 `Class.ImageButton.ScaleType|ScaleType` which determines how an
      image will scale if displayed in a UI element whose size differs from the
      source image.
    code_samples: []
    type: float
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
  - name: ImageButton.TileSize
    summary: |
      Sets the tiling scale of the ImageButton.
    description: |
      Sets the tiling size of the `Class.ImageButton` starting at the upper-left
      corner of the image. The default `Datatype.UDim2` values are <Typography
      noWrap>`1, 0, 1, 0`</Typography>; the scale components of the
      `Datatype.UDim2` will scale the tile based on the size of the
      `Class.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
      `Class.ImageButton` in the corresponding axis.

      This property is only active if the
      `Class.ImageButton.ScaleType|ScaleType` property is set to
      `Enum.ScaleType.Tile`.
    code_samples: []
    type: UDim2
    tags: []
    deprecation_message: ''
    security:
      read: None
      write: None
    thread_safety: ReadSafe
    category: Image
    serialization:
      can_load: true
      can_save: true
    capabilities:
      - UI
methods: []
events: []
callbacks: []