Text

The Text component displays textual information in a number of optional styles and variants.

You can learn more about this component in the Working with Text article.

Also note that variants of the Text component are also mapped to HtmlTag components. See the variant section to check which variant maps to which HtmlTag.

Properties

`ellipses` (default: true)

This property indicates whether ellipses should be displayed when the text is cropped (true) or not (false).

<App>
  <VStack width="120px">
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </Text>
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1">
      Though this long text does is about to crop!
    </Text>
  </VStack>
</App>

Example: ellipses

<App>
  <VStack width="120px">
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1"
      ellipses="false">
      Though this long text does is about to crop!
    </Text>
    <Text
      backgroundColor="cyan"
      color="black"
      maxLines="1">
      Though this long text does is about to crop!
    </Text>
  </VStack>
</App>

`maxLines`

This property determines the maximum number of lines the component can wrap to. If there is no space to display all the contents, the component displays up to as many lines as specified in this property. When the value is not defined, there is no limit on the displayed lines.

<App>
  <Text
    maxWidth="120px"
    backgroundColor="cyan"
    color="black"
    value="A long text that will likely overflow"
    maxLines="2" />
</App>

Example: maxLines

<App>
  <Text
    maxWidth="120px"
    backgroundColor="cyan"
    color="black"
    value="A long text that will likely overflow"
    maxLines="2" />
</App>

`preserveLinebreaks` (default: false)

This property indicates if linebreaks should be preserved when displaying text.

<App>
  <HStack>
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="true"
      value="(preserve) This long text
      with several line breaks
              does not fit into a viewport with a 200-pixel width." />
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      value="(don't preserve) This long text
      with several line breaks
              does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

Example: preserveLinebreaks

<App>
  <HStack>
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      preserveLinebreaks="true"
      value="(preserve) This long text
      with several line breaks
              does not fit into a viewport with a 200-pixel width." />
    <Text
      width="250px"
      backgroundColor="cyan"
      color="black"
      value="(don't preserve) This long text
      with several line breaks
              does not fit into a viewport with a 200-pixel width." />
  </HStack>
</App>

Note: Remember to use the value property of the Text. Linebreaks are converted to spaces when nesting the text inside the Text component.

`value`

The text to be displayed. This value can also be set via nesting the text into the Text component.

<App>
  <Text value="An example text" />
  <Text>An example text</Text>
</App>

Example: value

<App>
  <Text value="An example text" />
  <Text>An example text</Text>
</App>

`variant`

An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context.

Available values:

Value	Description
`abbr`	Represents an abbreviation or acronym
`caption`	Represents the caption (or title) of a table
`cite`	Is used to mark up the title of a cited work
`code`	Represents a line of code
`codefence`	Handles the display of code blocks if combined with a `code` variant
`deleted`	Represents text that has been deleted
`em`	Marks text to stress emphasis
`inherit`	Represents text that inherits the style from its parent element
`inserted`	Represents a range of text that has been added to a document
`keyboard`	Represents a span of text denoting textual user input from a keyboard or voice input
`marked`	Represents text which is marked or highlighted for reference or notation
`mono`	Text using a mono style font family
`paragraph`	Represents a paragraph
`placeholder`	Text that is mostly used as the placeholder style in input controls
`sample`	Represents sample (or quoted) output from a computer program
`secondary`	Represents a bit dimmed secondary text
`small`	Represents side-comments and small print
`sub`	Specifies inline text as subscript
`strong`	Contents have strong importance
`subheading`	Indicates that the text is the subtitle in a heading
`subtitle`	Indicates that the text is the subtitle of some other content
`sup`	Specifies inline text as superscript
`tableheading`	Indicates that the text is a table heading
`title`	Indicates that the text is the title of some other content
`var`	Represents the name of a variable in a mathematical expression

Example: variant

HtmlTag Mappings

The table below indicates which Text variant maps to which HtmlTag component.

Variant	Component
`abbr`	abbr
`cite`	cite
`code`	code
`codefence`	pre
`deleted`	del
`inserted`	ins
`keyboard`	kbd
`marked`	mark
`sample`	samp
`sub`	sub
`sup`	sup
`var`	var
`strong`	strong
`em`	em
`paragraph`	p

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-Text-code	rgb(from $color-surface-100 r g b / 0.4)	rgb(from $color-surface-100 r g b / 0.4)
backgroundColor-Text-keyboard	rgb(from $color-surface-100 r g b / 0.4)	rgb(from $color-surface-100 r g b / 0.4)
backgroundColor-Text-marked	rgb(from $color-primary-200 r g b / 0.4)	rgb(from $color-primary-400 r g b / 0.4)
borderColor-Text-code	$color-surface-100	$color-surface-100
borderColor-Text-keyboard	$color-surface-300	$color-surface-300
borderRadius-Text	$borderRadius	$borderRadius
borderRadius-Text-code	4px	4px
borderRadius-Text-keyboard	none	none
borderStyle-Text	solid	solid
borderStyle-Text-code	solid	solid
borderStyle-Text-keyboard	none	none
borderWidth-Text	$space-0	$space-0
borderWidth-Text-code	1px	1px
borderWidth-Text-keyboard	1px	1px
color-Text-codefence	$color-surface-900	$color-surface-900
color-Text-marked	none	none
color-Text-placeholder	$color-surface-500	$color-surface-500
color-Text-secondary	$textColor-secondary	$textColor-secondary
color-Text-subheading	$textColor-secondary	$textColor-secondary
fontFamily-Text	$fontFamily	$fontFamily
fontFamily-Text-code	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-codefence	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-keyboard	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-mono	$fontFamily-monospace	$fontFamily-monospace
fontFamily-Text-sample	$fontFamily-monospace	$fontFamily-monospace
fontSize-Text	$fontSize-small	$fontSize-small
fontSize-Text-code	$fontSize-small	$fontSize-small
fontSize-Text-codefence	$fontSize-code	$fontSize-code
fontSize-Text-keyboard	$fontSize-small	$fontSize-small
fontSize-Text-markdown	fontSize-Text	fontSize-Text
fontSize-Text-paragraph	none	none
fontSize-Text-placeholder	$fontSize-smaller	$fontSize-smaller
fontSize-Text-sample	$fontSize-small	$fontSize-small
fontSize-Text-secondary	$fontSize-small	$fontSize-small
fontSize-Text-small	$fontSize-small	$fontSize-small
fontSize-Text-sub	$fontSize-smaller	$fontSize-smaller
fontSize-Text-subheading	$fontSize-H6	$fontSize-H6
fontSize-Text-subtitle	$fontSize-medium	$fontSize-medium
fontSize-Text-sup	$fontSize-smaller	$fontSize-smaller
fontSize-Text-tableheading	$fontSize-H6	$fontSize-H6
fontSize-Text-title	$fontSize-large	$fontSize-large
fontStyle-Text-cite	italic	italic
fontStyle-Text-em	italic	italic
fontStyle-Text-marked	none	none
fontStyle-Text-placeholder	none	none
fontStyle-Text-subheading	none	none
fontStyle-Text-var	italic	italic
fontWeight-Text	$fontWeight-normal	$fontWeight-normal
fontWeight-Text-abbr	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-keyboard	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-markdown	fontWeight-Text	fontWeight-Text
fontWeight-Text-marked	none	none
fontWeight-Text-placeholder	none	none
fontWeight-Text-subheading	$fontWeight-bold	$fontWeight-bold
fontWeight-Text-tableheading	$fontWeight-bold	$fontWeight-bold
letterSpacing-Text-caption	0.05rem	0.05rem
letterSpacing-Text-subheading	0.04em	0.04em
lineHeight-Text-codefence	1.5	1.5
lineHeight-Text-marked	none	none
lineHeight-Text-small	$lineHeight-tight	$lineHeight-tight
marginBottom-Text	none	none
marginBottom-Text-code	none	none
marginBottom-Text-codefence	none	none
marginBottom-Text-markdown	$space-6	$space-6
marginBottom-Text-small	none	none
marginBottom-Text-tableheading	$space-4	$space-4
marginLeft-Text	none	none
marginLeft-Text-code	none	none
marginLeft-Text-codefence	none	none
marginLeft-Text-markdown	none	none
marginLeft-Text-small	none	none
marginRight-Text	none	none
marginRight-Text-code	none	none
marginRight-Text-codefence	none	none
marginRight-Text-markdown	none	none
marginRight-Text-small	none	none
marginTop-Text	none	none
marginTop-Text-code	none	none
marginTop-Text-codefence	none	none
marginTop-Text-markdown	$space-3	$space-3
marginTop-Text-small	none	none
marginTop-Text-tableheading	$space-1	$space-1
paddingBottom-Text-code	2px	2px
paddingHorizontal-Text-code	$space-0_5	$space-0_5
paddingHorizontal-Text-codefence	$space-4	$space-4
paddingHorizontal-Text-keyboard	$space-1	$space-1
paddingHorizontal-Text-tableheading	$space-1	$space-1
paddingVertical-Text-codefence	$space-3	$space-3
paddingVertical-Text-paragraph	$space-1	$space-1
textColor-Text	$textColor-primary	$textColor-primary
textDecorationColor-Text-deleted	none	none
textDecorationColor-Text-inserted	none	none
textDecorationLine-Text-deleted	line-through	line-through
textDecorationLine-Text-inserted	underline	underline
textDecorationStyle-Text-deleted	none	none
textDecorationStyle-Text-inserted	none	none
textDecorationThickness-Text-deleted	none	none
textDecorationThickness-Text-inserted	none	none
textTransform-Text-abbr	uppercase	uppercase
textTransform-Text-subheading	uppercase	uppercase
verticalAlignment-Text	none	none
verticalAlignment-Text-code	none	none
verticalAlignment-Text-codefence	none	none
verticalAlignment-Text-markdown	none	none
verticalAlignment-Text-small	none	none
verticalAlignment-Text-sub	sub	sub
verticalAlignment-Text-sup	super	super

Text

Properties

ellipses (default: true)

maxLines

preserveLinebreaks (default: false)

value

variant