Skip to main content

Label

A basic text label with default styling to match built-in labels as closely as possible.

Dark Light
Dark Light

By default, text color matches the current theme's MainText color, which is the color used in the Explorer and Properties widgets as well as most other places. It can be overriden in two ways:

  1. Passing a StudioStyleGuideColor to the TextColorStyle prop. This is the preferred way to recolor text because it will use the correct version of the color for the user's current selected theme.
  2. Passing a Color3 value to the TextColor3 prop. This is useful when a color is not represented by any StudioStyleGuideColor or should remain constant regardless of theme.

Example of creating an error message label:

local function MyComponent()
	return React.createElement(StudioComponents.Label, {
		Text = "Please enter at least 5 characters!",
		TextColorStyle = Enum.StudioStyleGuideColor.ErrorText,
	})
end

Plugins like Theme Color Shower are useful for finding a StudioStyleGuideColor to use.

This component will parent any children passed to it to the underlying TextLabel instance. This is useful for things like adding extra padding around the text using a nested UIPadding, or adding a UIStroke / UIGradient.

Labels use Constants.DefaultFont for Font and Constants.DefaultTextSize for TextSize. This cannot currently be overriden via props.

Types​

Props​

Component Props
</>
interface Props {
Text: string
TextWrapped: boolean?
TextXAlignment: Enum.TextXAlignment?
TextYAlignment: Enum.TextYAlignment?
TextTruncate: Enum.TextTruncate?
TextTransparency: number?
TextColor3: Color3?
RichText: boolean?
MaxVisibleGraphemes: number?
TextColorStyle: Enum.StudioStyleGuideColor?
children: React.ReactNode
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Text",
                    "lua_type": "string",
                    "desc": ""
                },
                {
                    "name": "TextWrapped",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "TextXAlignment",
                    "lua_type": "Enum.TextXAlignment?",
                    "desc": ""
                },
                {
                    "name": "TextYAlignment",
                    "lua_type": "Enum.TextYAlignment?",
                    "desc": ""
                },
                {
                    "name": "TextTruncate",
                    "lua_type": "Enum.TextTruncate?",
                    "desc": ""
                },
                {
                    "name": "TextTransparency",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "TextColor3",
                    "lua_type": "Color3?",
                    "desc": ""
                },
                {
                    "name": "RichText",
                    "lua_type": "boolean?",
                    "desc": ""
                },
                {
                    "name": "MaxVisibleGraphemes",
                    "lua_type": "number?",
                    "desc": ""
                },
                {
                    "name": "TextColorStyle",
                    "lua_type": "Enum.StudioStyleGuideColor?",
                    "desc": ""
                },
                {
                    "name": "children",
                    "lua_type": "React.ReactNode",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 65,
                "path": "src/Components/Label.luau"
            }
        }
    ],
    "name": "Label",
    "desc": "A basic text label with default styling to match built-in labels as closely as possible.\n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/label/dark.png) | ![Light](/StudioComponents/components/label/light.png) |\n\nBy default, text color matches the current theme's MainText color, which is the color\nused in the Explorer and Properties widgets as well as most other places. It can be overriden\nin two ways:\n1. Passing a [StudioStyleGuideColor](https://create.roblox.com/docs/reference/engine/enums/StudioStyleGuideColor)\nto the `TextColorStyle` prop. This is the preferred way to recolor text\nbecause it will use the correct version of the color for the user's current selected theme.\n2. Passing a [Color3] value to the `TextColor3` prop. This is useful when a color is not represented\nby any StudioStyleGuideColor or should remain constant regardless of theme.\n\nExample of creating an error message label:\n\n```lua\nlocal function MyComponent()\n\treturn React.createElement(StudioComponents.Label, {\n\t\tText = \"Please enter at least 5 characters!\",\n\t\tTextColorStyle = Enum.StudioStyleGuideColor.ErrorText,\n\t})\nend\n```\n\nPlugins like [Theme Color Shower](https://create.roblox.com/store/asset/3115567199/Theme-Color-Shower)\nare useful for finding a StudioStyleGuideColor to use.\n\nThis component will parent any children passed to it to the underlying TextLabel instance.\nThis is useful for things like adding extra padding around the text using a nested UIPadding,\nor adding a UIStroke / UIGradient.\n\nLabels use [Constants.DefaultFont] for Font and [Constants.DefaultTextSize] for TextSize. This\ncannot currently be overriden via props.",
    "source": {
        "line": 40,
        "path": "src/Components/Label.luau"
    }
}