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 iOS-only modifiers refine text rendering — shrinking long strings to fit, tightening character spacing, varying font width, animating content changes, and attaching badges to list rows or tab items. Use minimumScaleFactor and allowsTightening together with lineLimit to gracefully fit text in fixed frames. Use contentTransition to animate text updates — particularly numeric counters.

​
minimumScaleFactor

Sets the minimum scale factor for text before it truncates. 
.minimumScaleFactor(factor: number): Component
​
factor
number
required
The minimum scale factor, from 0 to 1. For example, 0.5 allows text to shrink to 50% of its original size before truncating.
Auto-shrinking text 
Text("This text will shrink to fit")
    .minimumScaleFactor(0.5)
    .lineLimit(1)
Fitting a title in a fixed frame 
Text("A Very Long Title That Needs to Fit")
    .font("title")
    .minimumScaleFactor(0.7)
    .lineLimit(1)
    .frame({ maxWidth: 200 })
The system progressively reduces the font size down to minimumScaleFactor * originalSize before falling back to truncation. A value of 1 (the default) means no shrinking is allowed. Best used in combination with lineLimit to constrain the text to a fixed number of lines.

​
allowsTightening

Allows text to tighten character spacing to fit available space before truncating. 
.allowsTightening(isEnabled?: boolean)
​
isEnabled
boolean
default:"true"
Whether to allow the text to tighten its character spacing. Defaults to true.
Allow text to compress before truncating 
Text("A long title that should fit")
    .lineLimit(1)
    .allowsTightening()
Disable tightening 
Text("Fixed spacing")
    .allowsTightening(false)
Text tightening reduces the inter-character spacing slightly to fit more text in the available width. It is applied before truncation but after the minimum scale factor (if set).

​
fontWidth

Sets the font width variant for text content. 
.fontWidth(width: FontWidth)
​
width
FontWidth
required
The font width to apply. See FontWidth for available values (e.g., "compressed", "condensed", "standard", "expanded").
Condensed text 
Text("Condensed Heading")
    .fontWidth("condensed")
Expanded text 
Text("WIDE")
    .fontWidth("expanded")
Combined with weight and design 
Text("Compact Bold")
    .fontWeight("bold")
    .fontWidth("compressed")

​
badge

Adds a badge displaying a count or text to a component, typically used in tab bars or list rows. 
.badge(value: number | string)
​
value
number | string
required
The badge content. Pass a number for a count badge, or a string for a text badge.
Numeric badge on a list row 
Text("Inbox")
    .badge(5)
Text badge 
Text("Updates")
    .badge("New")
Badge on a tab item 
Label("Messages", { systemName: "message" })
    .badge(unreadCount)
Badges are most commonly used with List rows and TabView items. On iOS, the system renders the badge in a rounded capsule aligned to the trailing edge.

​
contentTransition

Controls how content changes are animated within a view. 
.contentTransition(type: ContentTransitionType | { countsDown: boolean })
​
type
ContentTransitionType | { countsDown: boolean }
required
The content transition type. Can be:
  • "numericText" — animates numeric text changes with a rolling digit effect
  • "opacity" — cross-fades between old and new content
  • "identity" — no animation, content updates immediately
  • "interpolate" — smoothly interpolates between old and new content
  • { countsDown: boolean } — numeric text transition with direction hint (true for counting down, false for counting up)
Animate a numeric counter 
Text(String(count))
    .contentTransition("numericText")
Numeric text with direction hint 
Text(String(countdown))
    .contentTransition({ countsDown: true })
Cross-fade content changes 
Text(statusMessage)
    .contentTransition("opacity")

​
See also

  • font — overall font style
  • fontWeight — font weight (e.g., bold, regular)
  • fontDesign — font design (e.g., serif, monospaced)
  • lineLimit — limits the number of displayed lines
  • transition — view-level appearance and disappearance transitions
  • FontWidth — font width values