Skip to main content

Button

A basic button that supports text, an icon, or both. This should be used as a standalone button or as a secondary button alongside a MainButton for the primary action in a group of options.

Dark Light
Dark Light

The OnActivated prop should be a callback which is run when the button is clicked. For example: 

local function MyComponent()
	return React.createElement(StudioComponents.Button, {
		Text = "Click Me",
		OnActivated = function()
			print("Button clicked!")
		end
	})
end

The default size of buttons can be found in Constants.DefaultButtonHeight. To override this, there are two main options, which may be combined:

  1. Pass a Size prop.
  2. Pass an AutomaticSize prop.

AutomaticSize is a simpler version of Roblox's built-in AutomaticSize system. Passing a value of Enum.AutomaticSize.X will override the button's width to fit the text and/or icon. Passing a value of Enum.AutomaticSize.Y will do the same but with the button's height. Passing Enum.AutomaticSize.XY will override both axes.

Types​

IconProps​

</>
interface IconProps {
Image: string
Size: Vector2
Transparency: number?
Color: Color3?
UseThemeColor: boolean?
ResampleMode: Enum.ResamplerMode?
RectOffset: Vector2?
RectSize: Vector2?
}

The Alignment prop is used to configure which side of any text the icon appears on. Left-alignment is the default and center-alignment is not supported.

When specifying icon color, at most one of Color and UseThemeColor should be specified.

Props​

Component Props
</>
interface Props {
AutomaticSize: AutomaticSize?
OnActivated: (() → ())?
Text: string?
Icon: IconProps?
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "IconProps",
            "desc": "The `Alignment` prop is used to configure which side of any text the icon \nappears on.\tLeft-alignment is the default and center-alignment is not supported.\n\nWhen specifying icon color, at most one of `Color` and `UseThemeColor` should be specified.",
            "fields": [
                {
                    "name": "Image",
                    "lua_type": "string",
                    "desc": ""
                },
                {
                    "name": "Size",
                    "lua_type": "Vector2",
                    "desc": ""
                },
                {
                    "name": "Transparency",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "Color",
                    "lua_type": "Color3?",
                    "desc": ""
                },
                {
                    "name": "UseThemeColor",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "Alignment",
                    "lua_type": "HorizontalAlignment?",
                    "desc": ""
                },
                {
                    "name": "ResampleMode",
                    "lua_type": "Enum.ResamplerMode?",
                    "desc": ""
                },
                {
                    "name": "RectOffset",
                    "lua_type": "Vector2?",
                    "desc": ""
                },
                {
                    "name": "RectSize",
                    "lua_type": "Vector2?",
                    "desc": ""
                }
            ],
            "source": {
                "line": 58,
                "path": "src/Components/Button.luau"
            }
        },
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "AutomaticSize",
                    "lua_type": "AutomaticSize?",
                    "desc": ""
                },
                {
                    "name": "OnActivated",
                    "lua_type": "(() -> ())?",
                    "desc": ""
                },
                {
                    "name": "Text",
                    "lua_type": "string?",
                    "desc": ""
                },
                {
                    "name": "Icon",
                    "lua_type": "IconProps?",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 70,
                "path": "src/Components/Button.luau"
            }
        }
    ],
    "name": "Button",
    "desc": "A basic button that supports text, an icon, or both. This should be used as a standalone button\nor as a secondary button alongside a [MainButton] for the primary action in a group of options.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/button/dark.png) | ![Light](/StudioComponents/components/button/light.png) |\n\nThe `OnActivated` prop should be a callback which is run when the button is clicked.\nFor example:\n\n```lua\nlocal function MyComponent()\n\treturn React.createElement(StudioComponents.Button, {\n\t\tText = \"Click Me\",\n\t\tOnActivated = function()\n\t\t\tprint(\"Button clicked!\")\n\t\tend\n\t})\nend\n```\n\nThe default size of buttons can be found in [Constants.DefaultButtonHeight]. To override this,\nthere are two main options, which may be combined:\n1. Pass a `Size` prop.\n2. Pass an `AutomaticSize` prop.\n\nAutomaticSize is a simpler version of Roblox's built-in AutomaticSize system. Passing a value of\n`Enum.AutomaticSize.X` will override the button's width to fit the text and/or icon. Passing a\nvalue of `Enum.AutomaticSize.Y` will do the same but with the button's height. Passing\n`Enum.AutomaticSize.XY` will override both axes.",
    "source": {
        "line": 34,
        "path": "src/Components/Button.luau"
    }
}