Skip to content

BaseButton

BaseButton is a button class that provides the base style and functionality of a button. When compared to other button classes, BaseButton does not introduce the ability to add text or anything, this will be sourced by the user using the component. If you are looking for implementation of buttons with text/infographic included, see TextButton, IconButton, or IconTextButton.

Usage

BaseButton can be created by calling Lydie.Components.Controls.BaseButton:

local textState = Fusion.Value("Hello world!")

Lydie.Components.Controls.BaseButton {
    Size = UDim2.fromOffset(200, 40),

    [Children] = { -- (1)!
        New "TextLabel" {
            Text = textState,
        },
    },

    OnClickDown = function(),
        textState:set("Hello world??")
    end,

    OnClick = function() -- (2)!
        textState:set("Hello world!")
    end,
}
  1. You can pass children using the [Fusion.Children] key, all children will be stored under the BaseButton object. See BaseButton.luau:51.
  2. OnClick function will be invoked when InputEnded is fired and its input type matches either Enum.UserInputType.MouseButton1 or Enum.UserInputType.Touch. Due to how input events work in Roblox, input will sink no matter what. You should ensure the user is clicking the button before doing any further processing. See BaseButton.luau:69.

Properties

Name Description Required Default
BackgroundColor Background color of the button ❌ Scheme.GetAnimated(Scheme.Color.Text.Primary)
BackgroundOpacity Background opacity of the button ❌ 0.85
RoundedValue The radius of the 4 corners ❌ Constants.RoundedValues[8]
LayoutOrder The layout order of the button, used in a UIListLayout/UIGridLayout ❌ 0
ZIndex The Z index of the button, used to show hierarchy of the button. ✅ NaN
AnchorPoint The location of the anchor point, defined in Vector2 ❌ Vector2.new(0, 0)
Position The relative position of the button ❌ UDim2.fromScale(0, 0)
Size The size of the button ❌ UDim2.fromOffset(200, 50)
[Fusion.Children] The children of the button, this is used to insert other objects into the button itself ❌ nil

Functions

Name Description Required
OnClickDown: () -> () A function invoked when MouseButton1Down is fired, where a user clicks the button and does not release ❌
OnClick: () -> () A function invoked when InputEnded is fired with matching input types Enum.UserInputType.MouseButton1 or Enum.UserInputType.Touch, where a user clicks the button and releases ❌