Skip to main content

Base

The foundational component of OnyxUI, from which all other components are built off of. Props supported here typically work in all other components.

Styling props

A reference of common styling props can be found in this docs page.

Types

BaseProps

interface BaseProps {
...BaseProps
ClassNamestring?
NameFusion.UsedAs<string>?
ParentFusion.UsedAs<Instance>?
PositionFusion.UsedAs<UDim2>?
RotationFusion.UsedAs<number>?
AnchorPointFusion.UsedAs<Vector2>?
SizeFusion.UsedAs<UDim2>?
AutomaticSizeFusion.UsedAs<Enum.AutomaticSize>?
VisibleFusion.UsedAs<boolean>?
ZIndexFusion.UsedAs<number>?
LayoutOrderFusion.UsedAs<number>?
ClipsDescendantsFusion.UsedAs<boolean>?
ActiveFusion.UsedAs<boolean>?
SelectableFusion.UsedAs<boolean>?
InteractableFusion.UsedAs<boolean>?
BackgroundColor3Fusion.UsedAs<Color3>?
BackgroundTransparencyFusion.UsedAs<number>?
NextSelectionDownFusion.UsedAs<GuiObject>?
NextSelectionUpFusion.UsedAs<GuiObject>?
NextSelectionRightFusion.UsedAs<GuiObject>?
NextSelectionLeftFusion.UsedAs<GuiObject>?
SelectionImageObjectFusion.UsedAs<GuiObject>?
SelectionOrderFusion.UsedAs<number>?
SizeConstraintFusion.UsedAs<Enum.SizeConstraint>?
AutoLocalizeFusion.UsedAs<boolean>?
RootLocalizationTableFusion.UsedAs<LocalizationTable>?
SelectionBehaviorDownFusion.UsedAs<Enum.SelectionBehavior>?
SelectionBehaviorUpFusion.UsedAs<Enum.SelectionBehavior>?
SelectionBehaviorRightFusion.UsedAs<Enum.SelectionBehavior>?
SelectionBehaviorLeftFusion.UsedAs<Enum.SelectionBehavior>?
SelectionGroupFusion.UsedAs<boolean>?
CornerRadiusFusion.UsedAs<UDim>?
PaddingFusion.UsedAs<UDim>?
PaddingTopFusion.UsedAs<UDim>?
PaddingLeftFusion.UsedAs<UDim>?
PaddingRightFusion.UsedAs<UDim>?
PaddingBottomFusion.UsedAs<UDim>?
ScaleFusion.UsedAs<number>?
StrokeEnabledFusion.UsedAs<boolean>?
StrokeThicknessFusion.UsedAs<number>?
StrokeColorFusion.UsedAs<Color3>?
StrokeTransparencyFusion.UsedAs<number>?
StrokeLineJoinModeFusion.UsedAs<Enum.LineJoinMode>?
StrokeApplyStrokeModeFusion.UsedAs<Enum.ApplyStrokeMode>?
GradientEnabledFusion.UsedAs<boolean>?
GradientColorFusion.UsedAs<ColorSequence>?
GradientOffsetFusion.UsedAs<UDim>?
GradientRotationFusion.UsedAs<number>?
GradientTransparencyFusion.UsedAs<number>?
AspectRatioFusion.UsedAs<number>?
AspectTypeFusion.UsedAs<Enum.AspectType>?
DominantAxisFusion.UsedAs<Enum.DominantAxis>?
ListEnabledFusion.UsedAs<boolean>?
ListPaddingFusion.UsedAs<UDim>?
ListFillDirectionFusion.UsedAs<Enum.FillDirection>?
ListSortOrderFusion.UsedAs<Enum.SortOrder>?
ListWrapsFusion.UsedAs<boolean>?
ListHorizontalAlignmentFusion.UsedAs<Enum.HorizontalAlignment>?
ListHorizontalFlexFusion.UsedAs<boolean>?
ListVerticalAlignmentFusion.UsedAs<Enum.VerticalAlignment>?
ListVerticalFlexFusion.UsedAs<boolean>?
ListItemLineAlignmentFusion.UsedAs<Enum.ItemLineAlignment>?
GridEnabledFusion.UsedAs<boolean>?
GridCellPaddingFusion.UsedAs<UDim>?
GridCellSizeFusion.UsedAs<UDim2>?
GridFillDirectionFusion.UsedAs<Enum.FillDirection>?
GridFillDirectionMaxCellsFusion.UsedAs<number>?
GridSortOrderFusion.UsedAs<Enum.SortOrder>?
GridStartCornerFusion.UsedAs<Enum.StartCorner>?
GridHorizontalAlignmentFusion.UsedAs<Enum.HorizontalAlignment>?
GridVerticalAlignmentFusion.UsedAs<Enum.VerticalAlignment>?
TableEnabledFusion.UsedAs<boolean>?
TablePaddingFusion.UsedAs<UDim>?
TableFillEmptySpaceColumnsFusion.UsedAs<boolean>?
TableFillEmptySpaceRowsFusion.UsedAs<boolean>?
TableFillDirectionFusion.UsedAs<Enum.FillDirection>?
TableSortOrderFusion.UsedAs<Enum.SortOrder>?
TableMajorAxisFusion.UsedAs<Enum.TableMajorAxis>?
TableHorizontalAlignmentFusion.UsedAs<Enum.HorizontalAlignment>?
TableVerticalAlignmentFusion.UsedAs<Enum.VerticalAlignment>?
PageEnabledFusion.UsedAs<boolean>?
PageAnimatedFusion.UsedAs<boolean>?
PageCircularFusion.UsedAs<boolean>?
PageEasingDirectionFusion.UsedAs<Enum.EasingDirection>?
PageEasingStyleFusion.UsedAs<Enum.EasingStyle>?
PagePaddingFusion.UsedAs<UDim>?
PageTweenTimeFusion.UsedAs<number>?
PageFillDirectionFusion.UsedAs<Enum.FillDirection>?
PageSortOrderFusion.UsedAs<Enum.SortOrder>?
PageHorizontalAlignmentFusion.UsedAs<Enum.HorizontalAlignment>?
PageVerticalAlignmentFusion.UsedAs<Enum.VerticalAlignment>?
PageGamepadInputEnabledFusion.UsedAs<boolean>?
PageScrollWheelInputEnabledFusion.UsedAs<boolean>?
PageTouchInputEnabledFusion.UsedAs<boolean>?
FlexModeFusion.UsedAs<Enum.UIFlexMode>?
FlexItemLineAlignmentFusion.UsedAs<Enum.ItemLineAlignment>?
FlexGrowRatioFusion.UsedAs<number>?
FlexShrinkRatioFusion.UsedAs<number>?
MaxSizeFusion.UsedAs<Vector2>?
MinSizeFusion.UsedAs<Vector2>?
MaxTextSizeFusion.UsedAs<number>?
MinTextSizeFusion.UsedAs<number>?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "BaseProps",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "BaseProps",
                    "desc": ""
                },
                {
                    "name": "ClassName",
                    "lua_type": "string?",
                    "desc": ""
                },
                {
                    "name": "Name",
                    "lua_type": "Fusion.UsedAs<string>?",
                    "desc": ""
                },
                {
                    "name": "Parent",
                    "lua_type": "Fusion.UsedAs<Instance>?",
                    "desc": ""
                },
                {
                    "name": "Position",
                    "lua_type": "Fusion.UsedAs<UDim2>?",
                    "desc": ""
                },
                {
                    "name": "Rotation",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "AnchorPoint",
                    "lua_type": "Fusion.UsedAs<Vector2>?",
                    "desc": ""
                },
                {
                    "name": "Size",
                    "lua_type": "Fusion.UsedAs<UDim2>?",
                    "desc": ""
                },
                {
                    "name": "AutomaticSize",
                    "lua_type": "Fusion.UsedAs<Enum.AutomaticSize>?",
                    "desc": ""
                },
                {
                    "name": "Visible",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "ZIndex",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "LayoutOrder",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "ClipsDescendants",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "Active",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "Selectable",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "Interactable",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "BackgroundColor3",
                    "lua_type": "Fusion.UsedAs<Color3>?",
                    "desc": ""
                },
                {
                    "name": "BackgroundTransparency",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "NextSelectionDown",
                    "lua_type": "Fusion.UsedAs<GuiObject>?",
                    "desc": ""
                },
                {
                    "name": "NextSelectionUp",
                    "lua_type": "Fusion.UsedAs<GuiObject>?",
                    "desc": ""
                },
                {
                    "name": "NextSelectionRight",
                    "lua_type": "Fusion.UsedAs<GuiObject>?",
                    "desc": ""
                },
                {
                    "name": "NextSelectionLeft",
                    "lua_type": "Fusion.UsedAs<GuiObject>?",
                    "desc": ""
                },
                {
                    "name": "SelectionImageObject",
                    "lua_type": "Fusion.UsedAs<GuiObject>?",
                    "desc": ""
                },
                {
                    "name": "SelectionOrder",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "SizeConstraint",
                    "lua_type": "Fusion.UsedAs<Enum.SizeConstraint>?",
                    "desc": ""
                },
                {
                    "name": "AutoLocalize",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "RootLocalizationTable",
                    "lua_type": "Fusion.UsedAs<LocalizationTable>?",
                    "desc": ""
                },
                {
                    "name": "SelectionBehaviorDown",
                    "lua_type": "Fusion.UsedAs<Enum.SelectionBehavior>?",
                    "desc": ""
                },
                {
                    "name": "SelectionBehaviorUp",
                    "lua_type": "Fusion.UsedAs<Enum.SelectionBehavior>?",
                    "desc": ""
                },
                {
                    "name": "SelectionBehaviorRight",
                    "lua_type": "Fusion.UsedAs<Enum.SelectionBehavior>?",
                    "desc": ""
                },
                {
                    "name": "SelectionBehaviorLeft",
                    "lua_type": "Fusion.UsedAs<Enum.SelectionBehavior>?",
                    "desc": ""
                },
                {
                    "name": "SelectionGroup",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "CornerRadius",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "Padding",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "PaddingTop",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "PaddingLeft",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "PaddingRight",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "PaddingBottom",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "Scale",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "StrokeEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "StrokeThickness",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "StrokeColor",
                    "lua_type": "Fusion.UsedAs<Color3>?",
                    "desc": ""
                },
                {
                    "name": "StrokeTransparency",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "StrokeLineJoinMode",
                    "lua_type": "Fusion.UsedAs<Enum.LineJoinMode>?",
                    "desc": ""
                },
                {
                    "name": "StrokeApplyStrokeMode",
                    "lua_type": "Fusion.UsedAs<Enum.ApplyStrokeMode>?",
                    "desc": ""
                },
                {
                    "name": "GradientEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "GradientColor",
                    "lua_type": "Fusion.UsedAs<ColorSequence>?",
                    "desc": ""
                },
                {
                    "name": "GradientOffset",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "GradientRotation",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "GradientTransparency",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "AspectRatio",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "AspectType",
                    "lua_type": "Fusion.UsedAs<Enum.AspectType>?",
                    "desc": ""
                },
                {
                    "name": "DominantAxis",
                    "lua_type": "Fusion.UsedAs<Enum.DominantAxis>?",
                    "desc": ""
                },
                {
                    "name": "ListEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "ListPadding",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "ListFillDirection",
                    "lua_type": "Fusion.UsedAs<Enum.FillDirection>?",
                    "desc": ""
                },
                {
                    "name": "ListSortOrder",
                    "lua_type": "Fusion.UsedAs<Enum.SortOrder>?",
                    "desc": ""
                },
                {
                    "name": "ListWraps",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "ListHorizontalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.HorizontalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "ListHorizontalFlex",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "ListVerticalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.VerticalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "ListVerticalFlex",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "ListItemLineAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.ItemLineAlignment>?",
                    "desc": ""
                },
                {
                    "name": "GridEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "GridCellPadding",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "GridCellSize",
                    "lua_type": "Fusion.UsedAs<UDim2>?",
                    "desc": ""
                },
                {
                    "name": "GridFillDirection",
                    "lua_type": "Fusion.UsedAs<Enum.FillDirection>?",
                    "desc": ""
                },
                {
                    "name": "GridFillDirectionMaxCells",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "GridSortOrder",
                    "lua_type": "Fusion.UsedAs<Enum.SortOrder>?",
                    "desc": ""
                },
                {
                    "name": "GridStartCorner",
                    "lua_type": "Fusion.UsedAs<Enum.StartCorner>?",
                    "desc": ""
                },
                {
                    "name": "GridHorizontalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.HorizontalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "GridVerticalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.VerticalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "TableEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "TablePadding",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "TableFillEmptySpaceColumns",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "TableFillEmptySpaceRows",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "TableFillDirection",
                    "lua_type": "Fusion.UsedAs<Enum.FillDirection>?",
                    "desc": ""
                },
                {
                    "name": "TableSortOrder",
                    "lua_type": "Fusion.UsedAs<Enum.SortOrder>?",
                    "desc": ""
                },
                {
                    "name": "TableMajorAxis",
                    "lua_type": "Fusion.UsedAs<Enum.TableMajorAxis>?",
                    "desc": ""
                },
                {
                    "name": "TableHorizontalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.HorizontalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "TableVerticalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.VerticalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "PageEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "PageAnimated",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "PageCircular",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "PageEasingDirection",
                    "lua_type": "Fusion.UsedAs<Enum.EasingDirection>?",
                    "desc": ""
                },
                {
                    "name": "PageEasingStyle",
                    "lua_type": "Fusion.UsedAs<Enum.EasingStyle>?",
                    "desc": ""
                },
                {
                    "name": "PagePadding",
                    "lua_type": "Fusion.UsedAs<UDim>?",
                    "desc": ""
                },
                {
                    "name": "PageTweenTime",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "PageFillDirection",
                    "lua_type": "Fusion.UsedAs<Enum.FillDirection>?",
                    "desc": ""
                },
                {
                    "name": "PageSortOrder",
                    "lua_type": "Fusion.UsedAs<Enum.SortOrder>?",
                    "desc": ""
                },
                {
                    "name": "PageHorizontalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.HorizontalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "PageVerticalAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.VerticalAlignment>?",
                    "desc": ""
                },
                {
                    "name": "PageGamepadInputEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "PageScrollWheelInputEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "PageTouchInputEnabled",
                    "lua_type": "Fusion.UsedAs<boolean>?",
                    "desc": ""
                },
                {
                    "name": "FlexMode",
                    "lua_type": "Fusion.UsedAs<Enum.UIFlexMode>?",
                    "desc": ""
                },
                {
                    "name": "FlexItemLineAlignment",
                    "lua_type": "Fusion.UsedAs<Enum.ItemLineAlignment>?",
                    "desc": ""
                },
                {
                    "name": "FlexGrowRatio",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "FlexShrinkRatio",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "MaxSize",
                    "lua_type": "Fusion.UsedAs<Vector2>?",
                    "desc": ""
                },
                {
                    "name": "MinSize",
                    "lua_type": "Fusion.UsedAs<Vector2>?",
                    "desc": ""
                },
                {
                    "name": "MaxTextSize",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                },
                {
                    "name": "MinTextSize",
                    "lua_type": "Fusion.UsedAs<number>?",
                    "desc": ""
                }
            ],
            "source": {
                "line": 247,
                "path": "src/Components/Base.luau"
            }
        }
    ],
    "name": "Base",
    "desc": "The foundational component of OnyxUI, from which all other components are built off of. Props supported here typically work in all other components.\n\n:::info Styling props\nA reference of common styling props can be found in [this docs page](/docs/styling-props).\n:::",
    "source": {
        "line": 10,
        "path": "src/Components/Base.luau"
    }
}