Text Component

Text is a fundamental building block of web applications. Use text to display content inline in your app.

Text can be formatted as plaintext or using Markdown (opens in a new tab).

Properties

Visible

Prop	`isVisible`
Type	`boolean`
Default	`true`

Whether or not this node is visible.

Enabled

Prop	`isEnabled`
Type	`boolean`
Default	`true`

Whether or not this node is enabled.

Tooltip

Prop	`tooltip`
Type	`string`
Default	`undefined`

The tooltip text to display when hovered or focused over this node.

Top

Prop	`top`
Type	`number`
Default	`1`

The position of the node from the top side of the grid (grid-row-start).

Left

Prop	`left`
Type	`number`
Default	`1`

The position of the node from the left side of the grid (grid-column-start).

Width

Prop	`width`
Type	`string`
Default	`128px`

The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Width

Prop	`minWidth`
Type	`string`
Default	`undefined`

The minimum width of the node. When this node is in a grid layout, this property is ignored.

Max Width

Prop	`maxWidth`
Type	`string`
Default	`undefined`

The maximum width of the node. When this node is in a grid layout, this property is ignored.

Height

Prop	`height`
Type	`string`
Default	`32px`

The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height can be specified using CSS units (e.g. 100px or 100%), or be left unitless to be treated as flex-grow for the node.

Min Height

Prop	`minHeight`
Type	`string`
Default	`undefined`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Max Height

Prop	`maxHeight`
Type	`string`
Default	`undefined`

The minimum height of the node. When this node is in a grid layout, this property is ignored.

Overflow

Prop	`overflow`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`visible`

The strategy used to handle overflow in the horizontal and vertical axes for content that is larger than its container.

Overflow X

Prop	`overflowX`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the horizontal axis for content that is larger than its container.

Overflow Y

Prop	`overflowY`
Type	`Overflow ('auto' \| 'visible' \| 'hidden' \| 'scroll')`
Default	`auto`

The strategy used to handle overflow in the vertical axis for content that is larger than its container.

Custom Styles

Prop	`styles`
Type	`string`
Default	`::component { }`

Custom CSS styles to be applied to the node. Use element.styles to refer to the current node.

Object Fit

Prop	`objectFit`
Type	`ObjectFit ('none' \| 'contain' \| 'cover' \| 'fill' \| 'scale-down')`
Default	`cover`

The strategy used to set how the content of a replaced element should be resized to fit its container.

Value

Prop	`value`
Type	`string`
Default	`Hello world`

The text value to display.

Render Mode

Prop	`renderMode`
Type	`TextRenderingMethod ('text' \| 'markdown' \| 'link')`
Default	`text`

How to render value. If text or link, plaintext formatting is used. If markdown, Markdown formatting is used.

Link

Prop	`href`
Type	`string`
Default	`undefined`

The URL this node will link to.

Show External Indicator

Prop	`showExternalIndicator`
Type	`boolean`
Default	`false`

Show an arrow icon when the link points to an external resource.

Target

Prop	`target`
Type	`LinkTargetMethod ('_self' \| '_blank' \| '_parent' \| '_top')`
Default	`_self`

Specify the context in which the linked resource will open.

Prop	`fontSize`
Type	`FontSize ('xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl')`
Default	`md`

Line Height

Prop	`lineHeight`
Type	`string`
Default	`1.2`

The vertical distance between lines of text.

Text Align

Prop	`textAlign`
Type	`TextAlignment ('left' \| 'center' \| 'right')`
Default	`left`

The horizontal alignment of the text within the node.

Vertical Align

Prop	`verticalAlign`
Type	`VerticalAlignment ('top' \| 'center' \| 'bottom')`
Default	`center`

The vertical alignment of the text within the node.

Font Weight

Prop	`fontWeight`
Type	`FontWeight ('normal' \| 'bold' \| '100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900')`
Default	`normal`

The degree of boldness or lightness of the font used to display the text. Higher numbers mean more bold.

Font Style

Prop	`fontStyle`
Type	`FontStyle ('normal' \| 'italic' \| 'oblique')`
Default	`normal`

The style (such as italic or oblique) of the font used to display the text.

Text Decoration

Prop	`textDecorationLine`
Type	`TextDecoration ('none' \| 'underline' \| 'line-through')`
Default	`none`

The decoration (such as underline or line-through) to be used to display the text.

Text Color

Prop	`color`
Type	`string`
Default	`text.primary`

The color of the text.

Text Overflow

Prop	`textOverflow`
Type	`TextOverflow ('none' \| 'clip' \| 'ellipsis')`
Default	`none`

The overflow strategy (such as ellipsis) that will be used when displaying the text.

Event Handlers

On Click

Handler	`textNode.onClick`

Called when the user clicks the node. Use this event to trigger downstream actions when this node is clicked.

On Double Click

Handler	`textNode.onDoubleClick`

Called when the user double clicks the node. Use this event to trigger downstream actions when this node is double clicked.

On Hover

Handler	`textNode.onHover`

Called when the user hovers on the node. Use this event to trigger downstream actions when this node is hovered.

On Leave

Handler	`textNode.onLeave`

Called when the user is not hovering over the node. Use this event to trigger downstream actions when this node is no longer hovered.

Switch AWS S3