Text

Display reading, units or descriptive text. The font, font size, alignment, line wrapping and truncation can be set; the content is uniformly converted to a string, and empty values are displayed as empty.

Example

function main() {
  return (
    <Text fontSize={32} font="rounded" lineLimit={2} truncationMode="tail">
      Hello, CapDrive
    </Text>
  );
}

Usage

Content is converted with toString(); null/undefined render empty. Text cannot contain a Symbol or another View; combine icons and text in HStack. Constrain width to observe lineLimit and truncationMode. minimumScaleFactor=1 disables shrinking.
Numeric sizes use points. auto measures content; fill uses the space allocated by the parent. Size the container before tuning children. fill creates no extra space, and long text cannot enlarge a fixed parent.

Properties

children?TextContent | TextContent[]

Child drawing content.

fontSize?number

Font size in points.

Example14

Font weight from ultraLight to black; regular is normal weight.

Example"regular"

font?"default" | "rounded" | "monospaced" | "serif"

Font design: default, rounded, monospaced or serif.

Example"default"

color?Paint

Drawing color, including HDR colors.

ExampleHDR($env.foreground)

alignment?"leading" | "center" | "trailing"

Text alignment within its available width: leading, center or trailing.

Example"leading"

lineLimit?number | null

Maximum number of text lines. null or omission allows wrapping without a line-count limit.

Example1

truncationMode?"head" | "middle" | "tail"

Where to remove text when it does not fit: head, middle or tail.

Example"tail"

minimumScaleFactor?number

Minimum text scale when space is limited: 0.01–1; 1 disables shrinking.

Example0.5

monospacedDigits?boolean

Use equal-width digits so changing numbers do not shift horizontally.

Exampletrue

letterSpacing?number

Extra spacing between characters, in points.

Example0

contentAnimation?ContentAnimation

Transition when content changes. Choose the type supported by this View; duration/delay use seconds.

Example{type: "numericText"}

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80

padding?number

Content padding in points.

Example0

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

cornerRadius?number

Corner radius in points.

Example0

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <VStack width={180} spacing={12}>
      <Text width="fill" fontSize={20} lineLimit={2} truncationMode="tail">
        CapDrive — a longer instrument title
      </Text>
      <HStack alignment="firstTextBaseline" spacing={4}>
        <Text fontSize={48} monospacedDigits={true}>
          78
        </Text>
        <Text fontSize={14}>km/h</Text>
      </HStack>
    </VStack>
  );
}

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYfontSizeletterSpacingminimumScaleFactorcolortransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`fontSize`	`14`
`fontWeight`	`"regular"`
`font`	`"default"`
`monospacedDigits`	`true`
`minimumScaleFactor`	`1`
`lineLimit`	`null`
`alignment`	`"center"`
`truncationMode`	`"tail"`
`color`	`HDR($env.foreground)`

Example

Usage

Properties

Practical example

Animation

When omitted

HStack

Symbol

Color / Gradient

On this page

Text

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

HStack

Symbol

Color / Gradient

On this page