Skip to content

IconTextButton

IconTextButton is a class inherited from BaseButton, compared to its ancestor, IconTextButton provides both infographic and text support on top of a button.

Usage

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

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

Lydie.Components.Controls.IconTextButton {
    Size = UDim2.fromOffset(200, 40),
    Text = textState,
    Icon = Icons.album, -- (1)!

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

    OnClick = function() -- (2)!
        textState:set("Hello world!")
    end,
}

  1. Icon property accepts both a string of a state-wrapped string. The string should be either the asset URL or the ID of the image. Lydie has provided a list of icons from Lucide Icons for basic usage. Spritesheet-based icons are not supported at the moment.

  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

Note

While being inherited from BaseButton, TextButton does not allow using the Fusion.Children to insert children as it will be used to insert the text label and the icon instead.

Name Description Required Default
BackgroundColor Background color of the button ❌ Scheme.GetAnimated(Scheme.Color.Text.Primary)
BackgroundOpacity Background opacity of the button ❌ 0.85
ForegroundColor Foreground color of the button, used to color the text and icon ❌ BackgroundColor or Scheme.GetAnimated(Scheme.Color.Text.Primary)
Icon The asset URL/ID of the icon. ✅ nil
Text The text string of the button. ✅ nil
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)

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 ❌