Text
Typography primitive. Prefer Text over raw elements so size, weight, and color stay on the token scale.
Size
size 1
The quick brown fox jumps over the lazy dogsize 2
The quick brown fox jumps over the lazy dogsize 3
The quick brown fox jumps over the lazy dogsize 4
The quick brown fox jumps over the lazy dogsize 5
The quick brown fox jumps over the lazy dogsize 6
The quick brown fox jumps over the lazy dogsize 7
The quick brown fox jumps over the lazy dogsize 8
The quick brown fox jumps over the lazy dogsize 9
The quick brown fox jumps over the lazy dogWeight
light
Weight lightregular
Weight regularmedium
Weight mediumsemibold
Weight semiboldbold
Weight boldColor
primary
Color primarysecondary
Color secondarytertiary
Color tertiaryquaternary
Color quaternaryerror
Color errorsuccess
Color successwarning
Color warninginfo
Color infoOther
uppercase · wide
Section labelmono
123,456.78 CADrelaxed leading
Relaxed leading for longer helper copy in dense forms.truncate
This is intentionally long text to show single-line truncation.Developer
import { Text } from "@financial-tracking/design-system"API reference
Polymorphic via as. Defaults to span.
| Prop | Type | Default |
|---|---|---|
size | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | — |
weight | "light" | "regular" | "medium" | "semibold" | "bold" | — |
color | "primary" | "secondary" | "tertiary" | "quaternary" | "error" | "success" | "warning" | "info" | — |
align | "left" | "center" | "right" | — |
transform | "uppercase" | "lowercase" | "capitalize" | "none" | — |
spacing | "tight" | "normal" | "wide" | — |
leading | "tight" | "normal" | "relaxed" | "subhead" | — |
font | "sans" | "serif" | "mono" | "sans" |
as | ElementType | "span" |
truncate | boolean | — |
trim | boolean | — |