Skip to main content
Text(content: string | { markdown: string }): Component;
​
content
string | { markdown: string }
required
The text to display. Pass a plain string for unstyled text, or an object with a markdown key for inline markdown formatting (bold, italic, code, links).

​
Support

​
Usage

​
Plain text

Text("Hello, world!")

​
Inline markdown

Text({ markdown: "**Bold** and *italic* text with [links](https://example.com)" })

​
Styled text

Text("Welcome back")
    .font("title")
    .foregroundStyle(Color("blue"))
    .bold()

​
Multi-line with alignment

Text("This is a longer text that will wrap across multiple lines depending on available width.")
    .multilineTextAlignment("center")
    .lineLimit(3)
    .lineSpacing(4)

​
Typography modifiers

Text("SALE")
    .font("caption")
    .fontWeight("bold")
    .tracking(2)
    .foregroundStyle(Color("red"))
    .textCase("uppercase")

​
With padding and background

Text("Badge")
    .font("caption2")
    .bold()
    .foregroundStyle(Color("white"))
    .padding({ horizontal: 8, vertical: 4 })
    .background(Color("blue"))
    .cornerRadius(4)

​
Notes

  • Use Text for inline text display. For full document-level markdown with headings, lists, and code blocks, use Markdown instead.
  • The { markdown } form supports inline formatting only: bold, italic, strikethrough, code, and links.

​
See Also