Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

These modifiers shape how text is drawn. font, fontWeight, and fontDesign choose the typeface, weight, and variant. bold, italic, monospaced, strikethrough, and underline are convenience toggles for common styles and decorations. tracking and lineSpacing adjust spacing between letters and lines. textCase transforms case at render time. lineLimit and multilineTextAlignment control how text wraps and aligns across multiple lines.

​
font

Sets the font for text content in a component. 
.font(value?: TextStyle | number | CustomFont)
​
value
TextStyle | number | CustomFont
The font to apply. Can be:
  • A semantic text style name (e.g., "title", "body", "caption") — see TextStyle
  • A number for a custom point size using the system font
  • A CustomFont for a custom font family with a specific size
Semantic text style 
Text("Title").font("title")

Text("Small text").font("caption")
Custom point size 
Text("Custom size").font(24)
Custom font family 
Text("Custom font").font(
    CustomFont({ url: "https://example.com/Inter.ttf", family: "Inter", size: 16 })
)
Combined with weight and design 
Text("Styled")
    .font("title2")
    .fontWeight("semibold")
    .fontDesign("rounded")

​
fontWeight

Sets the font weight for text content. 
.fontWeight(weight: FontWeight)
​
weight
FontWeight
required
The font weight to apply. See FontWeight for available values (e.g., "ultraLight", "thin", "light", "regular", "medium", "semibold", "bold", "heavy", "black").
Semibold text 
Text("Heading")
    .fontWeight("semibold")
Light text 
Text("Subtitle")
    .fontWeight("light")
Combined with font style 
Text("Heavy Title")
    .font("largeTitle")
    .fontWeight("heavy")

​
fontDesign

Sets the font design variant for text content. 
.fontDesign(design: FontDesign)
​
design
FontDesign
required
The font design variant. See FontDesign for available values (e.g., "default", "rounded", "monospaced", "serif").
Rounded design 
Text("Friendly text")
    .fontDesign("rounded")
Monospaced design 
Text("let x = 42")
    .fontDesign("monospaced")
Serif design 
Text("Elegant heading")
    .font("title")
    .fontDesign("serif")

​
bold

Makes text bold. 
.bold(isActive?: boolean)
​
isActive
boolean
default:"true"
Whether bold is applied. Pass false to explicitly disable bold. Defaults to true.
Make text bold 
Text("Important")
    .bold()
Conditionally bold 
Text(item.title)
    .bold(item.isUnread)
Combined with other text modifiers 
Text("Headline")
    .bold()
    .italic()
    .foregroundStyle(Color("blue"))

​
italic

Makes text italic. 
.italic(isActive?: boolean): Component
​
isActive
boolean
default:"true"
Whether italic is applied. Pass false to explicitly disable italic.
Basic italic text 
Text("Emphasis").italic()
Conditionally italic 
const body = () => {
    const [isQuote, setIsQuote] = useState(true)

    return Text("To be or not to be")
        .italic(isQuote)
}
Combined with other typography modifiers 
Text("Bold Italic")
    .bold()
    .italic()
    .font("title2")

​
strikethrough

Adds a strikethrough line to text. 
.strikethrough(isActive?: boolean): Component
​
isActive
boolean
default:"true"
Whether the strikethrough is visible. Defaults to true. Pass false to remove.
Basic strikethrough 
Text("Completed task")
    .strikethrough()
Conditional strikethrough 
const body = () => {
    const [done, setDone] = useState(false)
    return Text("Buy groceries")
        .strikethrough(done)
        .onTapGesture(() => setDone(!done))
}
Sale price display 
VStack({ alignment: "leading" }, [
    Text("$49.99")
        .strikethrough()
        .foregroundStyle(Color("gray")),
    Text("$29.99")
        .foregroundStyle(Color("red"))
        .bold(),
])

​
underline

Adds an underline to text. 
.underline(isActive?: boolean): Component
​
isActive
boolean
default:"true"
Whether the underline is visible. Defaults to true. Pass false to remove.
Basic underline 
Text("Underlined text")
    .underline()
Conditional underline 
const body = () => {
    const [active, setActive] = useState(false)
    return Text("Toggle underline")
        .underline(active)
        .onTapGesture(() => setActive(!active))
}
Link-style text 
Text("Learn more")
    .underline()
    .foregroundStyle(Color("blue"))

​
monospaced

Uses a monospaced font variant for text. 
.monospaced(isActive?: boolean): Component
​
isActive
boolean
default:"true"
Whether to use the monospaced variant. Pass false to explicitly disable.
Code-style text 
Text("let x = 42").monospaced()
Tabular numbers Useful for aligning numbers in columns, since each digit takes the same width. 
VStack([
    Text("$1,234.56").monospaced(),
    Text("$   99.00").monospaced(),
    Text("$    5.50").monospaced()
])
Conditionally monospaced 
const body = () => {
    const [isCode, setIsCode] = useState(false)

    return Text("Hello World")
        .monospaced(isCode)
}

​
tracking

Adjusts letter spacing in text. 
.tracking(amount: MilliEm): Component
​
amount
MilliEm
required
The letter spacing in milli-em units. 1000 equals 1em (the width of the current font size). Use positive values to increase spacing or negative values to tighten.
tracking uses milli-em units where 1000 = 1em. For example, tracking(500) at a 16pt font size adds 8pt of spacing between each character. This is equivalent to CSS letter-spacing but uses a different unit scale. Wide letter spacing 
Text("SPACED")
    .tracking(500)
Tight letter spacing 
Text("Tight")
    .tracking(-200)
Heading with tracking 
Text("FEATURED")
    .font("caption")
    .fontWeight("semibold")
    .tracking(800)
    .foregroundStyle(Color("gray"))
    .textCase("uppercase")

​
lineSpacing

Adjusts spacing between lines of text. 
.lineSpacing(spacing: number): Component
​
spacing
number
required
The spacing between lines, in points. Higher values increase the gap between lines.
Increasing line spacing 
Text("Line one\nLine two\nLine three")
    .lineSpacing(8)
Readability for long-form text 
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.")
    .lineSpacing(6)
    .font("body")
    .frame({ maxWidth: 300 })

​
textCase

Transforms the text case of a component. 
.textCase(case: TextCase): Component
​
case
TextCase
required
The text transformation to apply: "uppercase" or "lowercase".
Uppercase 
Text("hello world")
    .textCase("uppercase")
Lowercase 
Text("LOUD TEXT")
    .textCase("lowercase")
Section headers 
VStack({ alignment: "leading", spacing: 8 }, [
    Text("Featured")
        .textCase("uppercase")
        .font("caption")
        .foregroundStyle(Color("gray"))
        .tracking(500),
    Text("Today's top picks")
        .font("title2"),
])

​
lineLimit

Limits text to a maximum number of lines with truncation. 
.lineLimit(lines?: number): Component
​
lines
number
The maximum number of lines to display. Excess text is truncated with an ellipsis. Pass undefined or omit to remove any line limit.
When text exceeds the line limit, it is truncated with an ellipsis (...) at the end. Passing undefined or omitting the argument removes any previously set line limit, allowing unlimited lines. Single-line text 
Text("This is a very long piece of text that will be truncated")
    .lineLimit(1)
Two-line description 
Text("A longer description that may wrap to a second line but will truncate after that with an ellipsis at the end.")
    .lineLimit(2)
Combined with minimum scale factor Allow text to shrink before truncating. 
Text("Shrink then truncate")
    .lineLimit(1)
    .minimumScaleFactor(0.5)

​
multilineTextAlignment

Sets horizontal text alignment within the component’s frame. 
.multilineTextAlignment(alignment: TextAlignment): Component
​
alignment
TextAlignment
required
The horizontal alignment for multi-line text. One of "leading", "center", or "trailing".
This modifier only affects text that wraps to multiple lines. Single-line text alignment is controlled by the parent container’s alignment or the .frame() alignment. The default alignment is "leading". Center-aligned text 
Text("This is a longer piece of text that will wrap to multiple lines and be centered.")
    .multilineTextAlignment("center")
    .frame({ maxWidth: 250 })
Trailing-aligned text 
Text("Right-aligned text\non multiple lines")
    .multilineTextAlignment("trailing")
Combined with frame alignment 
Text("Centered text in a full-width frame")
    .multilineTextAlignment("center")
    .frame({ maxWidth: Infinity, alignment: "center" })

​
See also