Text

Text displays… text! It’s used in place of TextLabel and TextButton engine components.

How to Use

In normal cases, you can replace TextLabel and TextButton with Text directly. Note that some properties have been put into tables to improve structure and compatibility with style tokens.

Text also supports state updates with the onStateChanged callback, which gives updates on hover, press, select, and more. In most cases, a Button with the TextButton variant should be used instead of Text for interactive elements.

⚠️

Warning

Performance Notice

Do not declare the onStateChanged callback inline.

For functional components, wrap it in useCallback and minimize dependencies. In class components, declare it in the Init function. Use bindings wherever possible to reduce re-renders.


local Neuron = require(Packages.Neuron)
local Text = Neuron.Text
...
 
local onStateChanged = React.useCallback(function(state)
    print("Text state changed", state)
end, {})
 
return React.createElement(Text, {
    Text = "Hello world!",
    onStateChanged = onStateChanged,
    tag = "padding-small grow size-280",
})

⚠️

Warning

Line Height and Padding

When using fontStyle.LineHeight and the Builder Sans font, padding will be set automatically to ensure that line height behaves the same as Figma. If you also set padding, it will override the automatic padding.