`CanvasGroup` renders descendants as a group with color and transparency
applied to the render result. `Class.UIComponent` visual modifiers such as
`Class.UICorner` and `Class.UIGradient` under a `CanvasGroup` will also apply
to the whole group. Note that `CanvasGroup` always has
`Class.GuiObject.ClipsDescendants|ClipsDescendants` set to `true` and all
descendants will render within group's viewport.

#### Important Notes

- Descendants of `CanvasGroup` will be rendered as a flattened texture only
  when the ancestor `Class.LayerCollector` has its
  `Class.LayerCollector.ZIndexBehavior|ZIndexBehavior` set to
  `Enum.ZIndexBehavior.Sibling`.
- `CanvasGroup` consumes extra texture memory. The quality of the texture and
  total memory usage is limited by the `Enum.QualityLevel` of the client. When
  exceeding the memory cap, `CanvasGroup` will render as a blank texture.
- It's recommended to use `CanvasGroup` with static sizes, otherwise a new
  texture would need to be created to accommodate new sizes.


CanvasGroup

Color tint that applies to all descendants.


CanvasGroup.GroupColor3

Transparency that applies to all descendants.


CanvasGroup.GroupTransparency

Blends descendants as a group with color/transparency.


`Class.GuiObject` is an abstract class (much like `Class.BasePart`) for a 2D
user interface object. It defines all the properties relating to the display
of a graphical user interface (GUI) object such as `Class.GuiObject.Size|Size`
and `Class.GuiObject.Position|Position`. It also has some useful read‑only
properties like `Class.GuiObject.AbsolutePosition|AbsolutePosition`,
`Class.GuiObject.AbsoluteSize|AbsoluteSize`, and
`Class.GuiObject.AbsoluteRotation|AbsoluteRotation`.

To manipulate the layout of GUI objects in special ways, you can use a layout
structure such as [list/flex](/ui/list-flex-layouts) or
[grid](/ui/grid-table-layouts), and you can style them beyond their
core properties through
[appearance modifiers](/ui/appearance-modifiers).

Although it's possible to detect mouse button events on any GUI object using
`Class.GuiObject.InputBegan|InputBegan` and
`Class.GuiObject.InputEnded|InputEnded`, only `Class.ImageButton` and
`Class.TextButton` have convenient dedicated events such as
`Class.TextButton.Activated|Activated` to detect click/press.


The below example assumes it's within a GuiObject such as a `TextButton`, and
that the `Class.GuiObject.Draggable` property is set to true. It will print
the UDim2 of where the player started dragging the object from.


This event fires when a player begins dragging the object.

See also `Class.GuiObject.DragStopped`.


GuiObject.DragBegin

initialPosition

A `Datatype.UDim2` value of the position of the `Class.GuiObject`
before any drag operation began.


Fired when a player begins dragging the object.


The below example assumes it's within a GuiObject such as a `TextButton`, and
that the `Class.GuiObject.Draggable` property is set to true. It will print
the X and Y of where the player stopped dragging the GUI. For example, if the
player were to stop dragging the object at 189, 180 the below would print The
player stopped dragging the GuiObject at (189, 180)


This event fires when a player stops dragging the object.

See also `Class.GuiObject.DragBegin`.


GuiObject.DragStopped

The mouse's **X** screen location in pixels, relative to the top left
corner of the screen.


The mouse's **Y** screen location in pixels, relative to the top left
corner of the screen.


Fired when a player stops dragging the object.


The following example demonstrates one of many usage examples of handling user
input from InputBegan depending on its type.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


This event fires when a user begins interacting with the `Class.GuiObject`
via a Human-Computer Interface device (Mouse button down, touch begin,
keyboard button down, etc).

The `Class.UserInputService` has a similarly named event that is not
restricted to a specific UI element: `Class.UserInputService.InputBegan`.

This event will always fire regardless of game state.

See also `Class.GuiObject.InputEnded` and `Class.GuiObject.InputChanged`.


GuiObject.InputBegan

input

An `Class.InputObject`, which contains useful data for querying user
input such as the `Enum.UserInputType|type of input`,
`Enum.UserInputState|state of input`, and
`Class.InputObject.Position|screen coordinates of the input`.


Fired when a user begins interacting via a Human-Computer Interface device
(Mouse button down, touch begin, keyboard button down, etc).


The following example demonstrates one of many usage examples of handling user
input from InputChanged depending on its type.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


This event fires when a user changes how they're interacting via a
Human-Computer Interface device (Mouse button down, touch begin, keyboard
button down, etc).

The `Class.UserInputService` has a similarly named event that is not
restricted to a specific UI element:
`Class.UserInputService.InputChanged`.

This event will always fire regardless of game state.

See also `Class.GuiObject.InputBegan` and `Class.GuiObject.InputEnded`.


GuiObject.InputChanged

Fired when a user changes how they're interacting via a Human-Computer
Interface device (Mouse button down, touch begin, keyboard button down,
etc).


The following example demonstrates one of many usage examples of handling user
input from InputEnded depending on its type.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


The InputEnded event fires when a user stops interacting via a
Human-Computer Interface device (Mouse button down, touch begin, keyboard
button down, etc).

The `Class.UserInputService` has a similarly named event that is not
restricted to a specific UI element: `Class.UserInputService.InputEnded`.

This event will always fire regardless of game state.

See also `Class.GuiObject.InputBegan` and `Class.GuiObject.InputChanged`.


GuiObject.InputEnded

An `Class.InputObject`, which contains useful data for querying user
input such as the `Enum.UserInputType`, `Enum.UserInputState`, and
`Class.InputObject.Position`.


Fired when a user stops interacting via a Human-Computer Interface device
(Mouse button down, touch begin, keyboard button down, etc).


The following example prints the mouse location, in pixels, when it enters GUI
element.


The MouseEnter event fires when a user moves their mouse into a
`Class.GuiObject` element.

Please do not rely on the `x` and `y` arguments passed by this event as a
fool-proof way to determine where the user's mouse is when it enters a
GUI. These coordinates may vary even when the mouse enters the GUI via the
same edge - particularly when the mouse enters the element quickly. This
is due to the fact the coordinates indicate the position of the mouse when
the event fires rather than the exact moment the mouse enters the GUI.

This event fires even when the GUI element renders beneath another
element.

If you would like to track when a user's mouse leaves a GUI element, you
can use the `Class.GuiObject.MouseLeave` event.

##### See Also

- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelForward`
- `Class.GuiObject.MouseWheelBackward`


GuiObject.MouseEnter

The mouse's **X** screen coordinate in pixels, relative to the top
left corner of the screen.


The mouse's **Y** screen coordinate in pixels, relative to the top
left corner of the screen.


Fires when a user moves their mouse into a GUI element.


The MouseLeave event fires when a user moves their mouse out of a
`Class.GuiObject` element.

Please do not rely on the `x` and `y` arguments passed by this event as a
fool-proof way to determine where the user's mouse is when it leaves a
GUI. These coordinates may vary even when the mouse leaves the GUI via the
same edge - particularly when the mouse leaves the element quickly. This
is due to the fact the coordinates indicate the position of the mouse when
the event fires rather than the exact moment the mouse leaves the GUI.

This event fires even when the GUI element renders beneath another
element.

##### See Also

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelForward`
- `Class.GuiObject.MouseWheelBackward`


GuiObject.MouseLeave

Fires when a user moves their mouse out of a GUI element.


Fires whenever a user moves their mouse while it is inside a
`Class.GuiObject` element. It is similar to `Class.Mouse.Move`, which
fires regardless whether the user's mouse is over a GUI element.

Note, this event fires when the mouse's position is updated, therefore it
will fire repeatedly while being moved.

The `x` and `y` arguments indicate the updated screen coordinates of the
user's mouse in pixels. These can be useful to determine the mouse's
location on the GUI, screen, and delta since the mouse's previous position
if it is being tracked in a global variable.

The code below demonstrates how to determine the `Datatype.Vector2` offset
of the user's mouse relative to a GUI element:

```lua
local Players = game:GetService("Players")

local CustomScrollingFrame = script.Parent
local SubFrame = CustomScrollingFrame:FindFirstChild("SubFrame")

local mouse = Players.LocalPlayer:GetMouse()

local function getPosition(X, Y)
	local gui_X = CustomScrollingFrame.AbsolutePosition.X
	local gui_Y = CustomScrollingFrame.AbsolutePosition.Y


	local pos = Vector2.new(math.abs(X - gui_X), math.abs(Y - gui_Y - 36))
	print(pos)
end

CustomScrollingFrame.MouseMoved:Connect(getPosition)
```

Note that this event may not fire exactly when the user's mouse enters or
exits a GUI element. Therefore, the `x` and `y` arguments may not match up
perfectly to the coordinates of the GUI's edges.

##### See Also

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseWheelForward`
- `Class.GuiObject.MouseWheelBackward`


GuiObject.MouseMoved

Fires whenever a user moves their mouse while it is inside a GUI element.


The WheelBackward event fires when a user scrolls their mouse wheel back
when the mouse is over a `Class.GuiObject` element. It is similar to
`Class.Mouse.WheelBackward`, which fires regardless whether the user's
mouse is over a GUI element.

This event fires merely as an indicator of the wheel's backward movement.
This means that the `x` and `y` mouse coordinate arguments don't change as
a result of this event. These coordinates only change when the mouse
moves, which can be tracked by the `Class.GuiObject.MouseMoved` event.

##### See Also

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelForward`


GuiObject.MouseWheelBackward

Fires when a user scrolls their mouse wheel back when the mouse is over a
GUI element.


The WheelForward event fires when a user scrolls their mouse wheel forward
when the mouse is over a `Class.GuiObject` element. It is similar to
`Class.Mouse.WheelForward`, which fires regardless whether the user's
mouse is over a GUI element.

This event fires merely as an indicator of the wheel's forward movement.
This means that the **X** and **Y** mouse coordinate arguments do not
change as a result of this event. These coordinates only change when the
mouse moves, which can be tracked by the `Class.GuiObject.MouseMoved`
event.

##### See Also

- `Class.GuiObject.MouseEnter`
- `Class.GuiObject.MouseLeave`
- `Class.GuiObject.MouseMoved`
- `Class.GuiObject.MouseWheelBackward`


GuiObject.MouseWheelForward

The **Y** coordinate of the user's mouse.


Fires when a user scrolls their mouse wheel forward when the mouse is over
a GUI element.


The following example prints a message when the user selects the object with a
gamepad.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


This event fires when the Gamepad selector starts focusing on the
`Class.GuiObject`.

If you want to check from the Gamepad select stops focusing on the GUI
element, you can use the `Class.GuiObject.SelectionLost` event.

When a GUI gains selection focus, the value of the
`Class.GuiService.SelectedObject|SelectedObject` property also changes to
the that gains selection. To determine which GUI gained selection, check
the value of this property.


GuiObject.SelectionGained

Fired when the GuiObject is being focused on with the Gamepad selector.


The following example prints a message when the element has its focus lost on
a gamepad.

In order for this to work as expected, it must be placed in a `LocalScript`
and a child of _gui_.


This event fires when the Gamepad selector stops focusing on the
`Class.GuiObject`.

If you want to check from the Gamepad select starts focusing on the GUI
element, you can use the `Class.GuiObject.SelectionGained` event.

When a GUI loses selection focus, the value of the
`Class.GuiService.SelectionObject|SelectionObject` property changes either
to `nil` or to the GUI element that gains selection focus. To determine
which GUI gained selection, or if no GUI is selected, check the value of
this property.


GuiObject.SelectionLost

Fired when the Gamepad selector stops focusing on the GuiObject.


This code sample allows the player to manipulate the screen position of some
UI element, like a `Frame`, by holding down on the UI element for a brief
moment. Then, the player moves their finger and releases. During the gesture
the Frame is colored blue with a white outline.


This event fires after a brief moment when the player holds their finger
on the UI element using a touch-enabled device. It fires with a table of
`Datatype.Vector2` that describe the relative screen positions of the
fingers involved in the gesture. In addition, it fires multiple times:
`Enum.UserInputState.Begin` after a brief delay,
`Enum.UserInputState.Change` if the player moves their finger during the
gesture, and finally `Enum.UserInputState.End`. The delay is platform
dependent; in Studio it is a little longer than one second.


GuiObject.TouchLongPress

touchPositions

An array of `Datatype.Vector2` that describe the **relative**
positions of the fingers involved in the gesture.


state

A `Enum.UserInputState` that describes the state of the gesture:

- Begin fires once at the beginning of the gesture (after the brief
  delay)
- Change fires if the player moves their finger while pressing down
- End fires once at the end of the gesture when they release their
  finger.


Fires when the player starts, continues and stops long-pressing the UI
element.


This code sample is meant to be placed in a `LocalScript` within an inner
`Frame` that is inside an outer `Frame`, or other `GuiObject`. It allows the
player to manipulate the position of the inner frame by moving their finger on
the outer frame.


This event fires when the player moves their finger on the UI element
using a touch-enabled device. It fires shortly before
`Class.GuiObject.TouchSwipe` would, and does not fire with
`Class.GuiObject.TouchTap`. This event is useful for allowing the player
to manipulate the position of UI elements on the screen.

This event fires with a table of `Datatype.Vector2` that describe the
relative screen positions of the fingers involved in the gesture. In
addition, it fires multiple times: `Enum.UserInputState.Begin` after a
brief delay, `Enum.UserInputState.Change` when the player moves their
finger during the gesture, and finally with `Enum.UserInputState.End`.


GuiObject.TouchPan

A Luau array of `Datatype.Vector2` objects, each indicating the
position of all the fingers involved in the gesture.


totalTranslation

Indicates how far the pan gesture has gone from its starting point.


velocity

Indicates how quickly the gesture is being performed in each
dimension.


Indicates the `Enum.UserInputState` of the gesture.


Fires when the player moves their finger on the UI element.


This code sample is meant for a `LocalScript` within an inner `Frame` that is
inside an outer `Frame`, or other `GuiObject`. It allows the player to scale
the inner frame by performing a `Class.GuiObject.TouchPinch` gesture on the
outer frame.


This event fires when the player uses two fingers to make a pinch or pull
gesture on the UI element using a touch-enabled device. A **pinch**
happens when two or more fingers move closer together, and a **pull**
happens when they move apart. This event fires in conjunction with
`Class.GuiObject.TouchPan`. This event is useful for allowing the player
to manipulate the scale (size) of UI elements on the screen, and is most
often used for zooming features.

This event fires with a table of `Datatype.Vector2` that describe the
relative screen positions of the fingers involved in the gesture. In
addition, it fires multiple times: `Enum.UserInputState.Begin` after a
brief delay, `Enum.UserInputState.Change` when the player moves a finger
during the gesture, and finally with `Enum.UserInputState.End`. It should
be noted that the scale should be used **multiplicatively**.


GuiObject.TouchPinch

A Luau array of `Datatype.Vector2` objects, each indicating the
position of all the fingers involved in the pinch gesture.


scale

A float that indicates the difference from the beginning of the pinch
gesture.


A float indicating how quickly the pinch gesture is happening.


Fires when the player performs a pinch or pull gesture using two fingers
on the UI element.


This code sample is meant for a `LocalScript` within an inner `Frame` that is
inside an outer `Frame`, or other `GuiObject`. It allows the player to rotate
the inner frame by performing a `Class.GuiObject.TouchRotate` gesture on the
outer frame.


This event fires when the player uses two fingers to make a pinch or pull
gesture on the UI element using a touch-enabled device. Rotation occurs
when the angle of the line between two fingers changes. This event fires
in conjunction with `Class.GuiObject.TouchPan`. This event is useful for
allowing the player to manipulate the rotation of UI elements on the
screen.

This event fires with a table of `Datatype.Vector2` that describe the
relative screen positions of the fingers involved in the gesture. In
addition, it fires multiple times: `Enum.UserInputState.Begin` after a
brief delay, `Enum.UserInputState.Change` when the player moves a finger
during the gesture, and finally with `Enum.UserInputState.End`.


GuiObject.TouchRotate

rotation

A float indicating how much the rotation has gone from the start of
the gesture.


A float that indicates how quickly the gesture is being performed.


Fires when the player performs a rotation gesture using two fingers on the
UI element.


This code sample will cause a `Frame` (or other `GuiObject`) to bounce when a
swipe gesture is performed on a touch-enabled device (or Studio's emulator).
Horizontal swipes will change the hue of the
`Class.GuiObject.BackgroundColor3`, while vertical swipes will change the
saturation.


This event fires when the player performs a swipe gesture on the UI
element using a touch-enabled device. It fires with the direction of the
gesture (Up, Down, Left or Right) and the number of touch points involved
in the gesture. Swipe gestures are often used to change tabs in mobile
UIs.


GuiObject.TouchSwipe

swipeDirection

A `Enum.SwipeDirection` indicating the direction of the swipe gesture
(Up, Down, Left or Right).


numberOfTouches

The number of touch points involved in the gesture (usually 1).


Fires when the player performs a swipe gesture on the UI element.


This code sample will toggle the `Class.GuiObject.BackgroundTransparency` of a
UI element, like a `Frame`, when it is tapped on a touch-enabled device.


This event fires when the player performs a tap gesture on the UI element
using a touch-enabled device. A tap is a quick single touch without any
movement involved (a longer press would fire
`Class.GuiObject.TouchLongPress`, and moving during the touch would fire
`Class.GuiObject.TouchPan` and/or `Class.GuiObject.TouchSwipe`). It fires
with a table of `Datatype.Vector2` objects that describe the relative
positions of the fingers involved in the gesture.


GuiObject.TouchTap

Fires when the player performs a tap gesture on the UI element.


This code sample demonstrates a more involved usage of TweenPosition by
detecting when the tween completes/cancels by defining a callback function. It
also prints whether the tween will play.


Smoothly moves a GUI to a new `Datatype.UDim2` position in the specified
time using the specified `Enum.EasingDirection` and `Enum.EasingStyle`.

This function will return whether the tween will play. It will not play if
another tween is acting on the `Class.GuiObject` and the override
parameter is `false`.

See also `Class.GuiObject:TweenSize()` and
`Class.GuiObject:TweenSizeAndPosition()`.


GuiObject:TweenPosition

endPosition

easingDirection

The direction in which to ease the GUI to the _endPosition_.


easingStyle

The style in which to ease the GUI to the _endPosition_.


time

How long, in seconds, the tween should take to complete.


override

Whether the tween will override an in-progress tween.


callback

A callback function to execute when the tween completes.


Smoothly moves a GUI to a new `Datatype.UDim2`.


This code sample demonstrates the usage of the `Class.GuiObject:TweenSize()`
function. It initiates an animation on the parent's `Class.GuiObject.Size`
property to `UDim2.new(0.5, 0, 0.5, 0)`, which is half the `GuiObject`'s
parent size on both axes.

Additionally, it demonstrates how the callback parameter can be used to detect
when the tween stops (whether it was cancelled by another tween or completed).


Smoothly resizes a `Class.GuiObject` to a new `Datatype.UDim2` in the
specified time using the specified `Enum.EasingDirection` and
`Enum.EasingStyle`.

This function will return whether the tween will play. Normally this will
always return `true`, but it will return `false` if another tween is
active and override is set to `false`.

See also `Class.GuiObject:TweenSize()` and
`Class.GuiObject:TweenSizeAndPosition()`.


GuiObject:TweenSize

endSize

The direction in which to ease the GUI to the _endSize_.


The style in which to ease the GUI to the _endSize_.


Smoothly resizes a `Class.GuiObject` to a new `Datatype.UDim2`.


The below example would tween a `Class.Frame` to the top left of the parent's
size and resize it down to 0.


Smoothly resizes and moves a GUI to a new `Datatype.UDim2` size and
position in the specified time using the specified `Enum.EasingDirection`
and `Enum.EasingStyle`.

This function will return whether the tween will play. Normally this will
always return `true`, but it will return `false` if another tween is
active and override is set to `false`.

See also `Class.GuiObject:TweenSize()` and
`Class.GuiObject:TweenSizeAndPosition()`.


GuiObject:TweenSizeAndPosition

The direction in which to ease the GUI to the _endSize_ and
_endPosition_.


The style in which to ease the GUI to the _endSize_ and _endPosition_.


Smoothly moves a GUI to a new size and position.


GuiObject

This code sample demonstrates the usage of the Active property as a debounce
for the Activated event.


This property determines whether the `Class.GuiObject` will sink input to
3D space, such as underlying models with a `Class.ClickDetector` class
like `Class.DragDetector`.

For `Class.GuiButton` objects (`Class.ImageButton` and
`Class.TextButton`), this property determines whether
`Class.GuiButton.Activated|Activated` fires
(`Class.GuiButton.AutoButtonColor|AutoButtonColor` will still work for
those as well). The events `Class.GuiObject.InputBegan|InputBegan`,
`Class.GuiObject.InputChanged|InputChanged`, and
`Class.GuiObject.InputEnded|InputEnded` work as normal no matter the value
of this property.


GuiObject.Active

Determines whether this UI element sinks input.


This code sample moves a UI element to different sides of the parent element.
It starts at the top-left and ends at the bottom-right. Paste into a
LocalScript in a Frame, within a ScreenGui.


This property determines the origin point of a `Class.GuiObject`, relative
to its absolute size. The origin point determines from where the element
is positioned (through `Class.GuiObject.Position`) and from which the
rendered `Class.GuiObject.Size` expands.

See [here](/ui/position-and-size#anchorpoint) for illustrated
diagrams and details.


GuiObject.AnchorPoint

Determines the origin point of a `Class.GuiObject`, relative to its
absolute size.


The following script creates an automatically-sized parent frame with
a`UIListLayout`, then it inserts several automatically-sized `TextLabel`
objects. Note how the parent `UIListLayout` automatically resizes to fit its
child content and the labels automatically resize to fit their text content.
This script can be parented to a `ScreenGui`.


This property is used to automatically size parent UI objects based on the
size of its descendants. You can use this property to dynamically add text
and other content to a UI object at edit or run time, and the size will
adjust to fit that content.

When `Class.GuiObject.AutomaticSize|AutomaticSize` is set to an
`Enum.AutomaticSize` value to anything other than
`Enum.AutomaticSize|None`, this UI object may resize depending on its
child content.

For more information on how to use this property and how it works, please
see [here](/ui/size-modifiers#automatic-sizing).


GuiObject.AutomaticSize

Determines whether resizing occurs based on child content.


Determines the color of the `Class.GuiObject` background.


GuiObject.BackgroundColor

This code sample causes a parent Frame to loop through all colors of the
rainbow using Color3.fromHSV.


This property determines the color of a `Class.GuiObject` background (the
fill color). If your element contains text, such as a `Class.TextBox`,
`Class.TextButton`, or `Class.TextLabel`, make sure the color of your
background contrasts the text's color.

Another property that determines the visual properties of the background
is `Class.GuiObject.BackgroundTransparency`; if this is set to `1`,
neither the background nor the border will render.

See also `Class.GuiObject.BorderColor3|BorderColor3`.


GuiObject.BackgroundColor3

Determines the `Class.GuiObject` background color.


This property determines the transparency of the `Class.GuiObject`
background and border. It does not, however, determine the transparency of
text if the GUI is a `Class.TextBox`, `Class.TextButton`, or
`Class.TextLabel`; text transparency is determined
`Class.TextBox.TextTransparency`, `Class.TextButton.TextTransparency`, and
`Class.TextLabel.TextTransparency` respectively.

If this property is set to `1`, neither the background nor the border will
render and the GUI background will be completely transparent.


GuiObject.BackgroundTransparency

Determines the transparency of the `Class.GuiObject` background and
border.


Determines the color of the `Class.GuiObject` border.


GuiObject.BorderColor

This code sample causes the border of a parent GuiObject to highlight when the
user hovers their mouse over the element.


Determines the color of the `Class.GuiObject` rectangular border (also
known as the stroke color). This is separate from the object's
`Class.GuiObject.BackgroundColor3`. You will not be able to see the
object's border if its `Class.GuiObject.BorderSizePixel` property is set
to `0`.

Note that the `Class.UIStroke` component allows for more advanced border
effects.


GuiObject.BorderColor3

This property determines in what manner the `Class.GuiObject` border is
laid out relative to its dimensions using the enum of the same name,
`Enum.BorderMode`.

Note that `Class.UIStroke` can override this property and allow for more
advanced border effects.


GuiObject.BorderMode

Determines in what manner the `Class.GuiObject` border is laid out
relative to its dimensions.


This property determines how wide the `Class.GuiObject` border renders, in
pixels. Setting this to 0 disables the border altogether.

Note that `Class.UIStroke` can override this property and allow for more
advanced border effects.


GuiObject.BorderSizePixel

Determines the pixel width of the `Class.GuiObject` border.


This property determines if the `Class.GuiObject` will clip (make
invisible) any portion of descendant GUI elements that would otherwise
render outside the bounds of the rectangle.

Note that `Class.GuiObject.Rotation|Rotation` isn't supported by this
property. If this or any ancestor GUI has a **non‑zero**
`Class.GuiObject.Rotation|Rotation`, this property is **ignored** and
descendant GUI elements will be rendered regardless of this property's
value.


GuiObject.ClipsDescendants

Determines if descendant `Class.GuiObject|GuiObjects` outside of the
bounds of a parent GUI element should render.


This indicates whether a `Class.GuiObject` (and its descendants) can be
dragged around the screen.


GuiObject.Draggable

Determines whether a `Class.GuiObject` (and its descendants) can be
dragged around the screen.


When the player's finger is being tapped and held on the
`Class.GuiObject`, the `Class.GuiObject.GuiState|GuiState` of the
`Class.GuiObject` will be set to `Enum.GuiState.Press|Press`. Similarly,
When the player's finger is being released from the `Class.GuiObject`, the
`Class.GuiObject.GuiState|GuiState` of the `Class.GuiObject` will be set
to `Enum.GuiState.Idle|Idle`, and when
`Class.GuiObject.Interactable|Interactable` is turned off on the
`Class.GuiObject`, the `Class.GuiState` of the `Class.GuiObject` will be
set to `Enum.GuiState.NonInteractable|NonInteractable`.


GuiObject.GuiState

Determines whether the player's mouse is being actively pressed on the
`Class.GuiObject` or not.


GuiObject.InputSink

Determines whether the `Class.GuiButton` can be interacted with or not, or
if the `Enum.GuiState|GuiState` of the `Class.GuiObject` is changing or
not.

On a `Class.GuiButton`:

- When the `Class.GuiObject.Interactable|Interactable` setting on the
  `Class.GuiButton` is set to `false`, the `Class.GuiButton` will no
  longer be able to be pressed or clicked, and the
  `Class.GuiObject.GuiState|GuiState` will be constantly set to
  `Enum.GuiState.NonInteractable|NonInteractable`.
- When the `Class.GuiObject.Interactable|Interactable` setting on the
  `Class.GuiButton` is set to `true`, the `Class.GuiButton` will behave
  normally again and the `Class.GuiObject.GuiState|GuiState` will behave
  normally.

On a `Class.GuiObject`:

- When the `Class.GuiObject.Interactable|Interactable` setting on the
  `Class.GuiButton` is set to `false`, the
  `Class.GuiObject.GuiState|GuiState` will be constantly set to
  `Enum.GuiState.NonInteractable|NonInteractable`.
- When the `Class.GuiObject.Interactable|Interactable` setting on the
  `Class.GuiButton` is set to `true`, the
  `Class.GuiObject.GuiState|GuiState` will behave normally again.


GuiObject.Interactable

Determines whether the `Class.GuiButton` can be interacted with or not, or
if the `Enum.GuiState|GuiState` of the `Class.GuiObject` is changing or
not.


This property controls the sorting order of the `Class.GuiObject` when
using a `Class.UIGridStyleLayout` (such as `Class.UIListLayout` or
`Class.UIPageLayout`) with `Class.UIGridStyleLayout.SortOrder|SortOrder`
set to `Enum.SortOrder.LayoutOrder`. It has no functionality if the object
does not have a sibling UI layout structure.

`Class.GuiObject|GuiObjects` are sorted in ascending order where lower
values take priority over higher values. Objects with equal values fall
back to the order they were added in.

If you are unsure if you'll need to add an element between two existing
elements in the future, it's a good practice to use multiples of `100`
(`0`, `100`, `200`, etc.). This ensures a large gap of layout order values
which you can use for elements ordered in-between other elements.

See also `Class.GuiObject.ZIndex|ZIndex` which determines the object's
**rendering** order instead of sorting order.


GuiObject.LayoutOrder

Controls the sort order of the `Class.GuiObject` when used with a
`Class.UIGridStyleLayout`.


This example demonstrates how to enable Gamepad navigation through a grid of
`GuiObject|GUI` elements without manually having to connect the
`Class.GuiObject.NextSelectionUp`, `Class.GuiObject.NextSelectionDown`, and
`GuiObject|NextSelectionRight`, and `Class.GuiObject.NextSelectionLeft`
properties for every element in the grid.

Note that this code sample assumes your `UIGridLayout` is sorted by
`Class.UIGridLayout.SortOrder|name`, where elements are named in successive
numerical order.

The code relies on this to set the NextSelection properties for all
`GuiObjects` in the same level as the UIGridLayout. In our example, the
UIGridLayoutObject and GUI elements within the grid are all children of a
`Frame` named _"Container"_. The code
`Class.Instance:GetChildren()|gets the children` of _"Container"_ and loops
through each child. Children that are not GuiObjects are ignored. For each GUI
element, the code attempts to assigned the NextSelection properties using the
following logic:

1. Starting with 1, the name of all GUI elements match their position in the
   grid
2. Left: The item to the left will always be numbered 1 less than the current
   element
3. Right: The item to the left will always be numbered 1 more than the current
   element
4. Up: The item above (up) will always be number of GUIs in a row 1 less than
   the current element
5. Down: The item below (down) will always be the number of GUIs in a row more
   than the current element This logic also allows for the GUI elements at the
   begging and end of rows (excluding the first and last element) to wrap
   around to the next and previous rows. If an element doesn't exist to the
   left, right, up, or down, the NextSelection will remain nil and moving the
   Gamepad selector in the direction will not change the selected GUI.

This example also contains code to test the grid using the arrow keys (Up,
Down, Left, Right) of your keyboard instead of a gamepad, just in case you
don't have a gamepad to test with. This portion of code initially selects the
element named _"1"_ by assigning it to the `Class.GuiService.SelectedObject`
property.


This property sets the `Class.GuiObject` selected when the user moves the
[gamepad](/input/gamepad) selector downward. If this property
is empty, moving the gamepad downward will not change the selected GUI.

Moving the gamepad selector downward sets the
`Class.GuiService.SelectedObject` to this object unless the GUI is not
`Class.GuiObject.Selectable|Selectable`. Note that this property can be
set to a GUI element even if it is not
`Class.GuiObject.Selectable|Selectable`, so you should ensure that the
value of a GUI's selectable property matches your expected behavior.

See also `Class.GuiObject.NextSelectionUp|NextSelectionUp`,
`Class.GuiObject.NextSelectionLeft|NextSelectionLeft`, and
`Class.GuiObject.NextSelectionRight|NextSelectionRight`.


GuiObject.NextSelectionDown

Sets the `Class.GuiObject` which will be selected when the gamepad
selector is moved downward.


This property sets the `Class.GuiObject` selected when the user moves the
[gamepad](/input/gamepad) selector to the left. If this
property is empty, moving the gamepad to the left will not change the
selected GUI.

Moving the gamepad selector to the left sets the
`Class.GuiService.SelectedObject` to this object unless the GUI is not
`Class.GuiObject.Selectable|Selectable`. Note that this property can be
set to a GUI element even if it is not
`Class.GuiObject.Selectable|Selectable`, so you should ensure that the
value of a GUI's selectable property matches your expected behavior.

See also `Class.GuiObject.NextSelectionUp|NextSelectionUp`,
`Class.GuiObject.NextSelectionDown|NextSelectionDown`, and
`Class.GuiObject.NextSelectionRight|NextSelectionRight`.


GuiObject.NextSelectionLeft

Sets the `Class.GuiObject` which will be selected when the gamepad
selector is moved to the left.


This property sets the `Class.GuiObject` selected when the user moves the
[gamepad](/input/gamepad) selector to the right. If this
property is empty, moving the gamepad to the right will not change the
selected GUI.

Moving the gamepad selector to the right sets the
`Class.GuiService.SelectedObject` to this object unless the GUI is not
`Class.GuiObject.Selectable|Selectable`. Note that this property can be
set to a GUI element even if it is not
`Class.GuiObject.Selectable|Selectable`, so you should ensure that the
value of a GUI's selectable property matches your expected behavior.

See also `Class.GuiObject.NextSelectionUp|NextSelectionUp`,
`Class.GuiObject.NextSelectionDown|NextSelectionDown`, and
`Class.GuiObject.NextSelectionLeft|NextSelectionLeft`.


GuiObject.NextSelectionRight

Sets the `Class.GuiObject` which will be selected when the gamepad
selector is moved to the right.


This property sets the `Class.GuiObject` selected when the user moves the
[gamepad](/input/gamepad) selector upward. If this property is
empty, moving the gamepad upward will not change the selected GUI.

Moving the gamepad selector upward sets the
`Class.GuiService.SelectedObject` to this object unless the GUI is not
`Class.GuiObject.Selectable|Selectable`. Note that this property can be
set to a GUI element even if it is not
`Class.GuiObject.Selectable|Selectable`, so you should ensure that the
value of a GUI's selectable property matches your expected behavior.

See also `Class.GuiObject.NextSelectionDown|NextSelectionDown`,
`Class.GuiObject.NextSelectionLeft|NextSelectionLeft`,
`Class.GuiObject.NextSelectionRight|NextSelectionRight`.


GuiObject.NextSelectionUp

Sets the `Class.GuiObject` which will be selected when the gamepad
selector is moved upward.


This property determines the `Class.GuiObject` pixel and scalar position
using a `Datatype.UDim2`. Position is centered around the object's
`Class.GuiObject.AnchorPoint`.

The scalar position is relative to the size of the parent GUI element, if
any.

The pixel portions of the `Datatype.UDim2` value are the same regardless
of the parent GUI's size. The values represent the position of the object
in pixels. An object's actual pixel position can be read from the
`Class.GuiBase2d.AbsolutePosition` property.


GuiObject.Position

Determines the pixel and scalar position of the `Class.GuiObject`.


This property determines the number of degrees by which the
`Class.GuiObject` is rotated. Rotation is relative to the **center** of
the object, **not** the `Class.GuiObject.AnchorPoint|AnchorPoint`, meaning
you cannot change the point of rotation. Additionally, this property is
not compatible with `Class.GuiObject.ClipsDescendants|ClipsDescendants`.


GuiObject.Rotation

Determines the number of degrees by which the `Class.GuiObject` is
rotated.


An abstract class for all 2D user interface objects.


/reference/engine/classes/CanvasGroup.yaml