Text
Text can be rendered in different sizes and colors in order to structure content.
Name | Type | Description | Options |
---|---|---|---|
children | any? |
The text value. | |
variant | TextVariant? |
Determines the size and font weight of the text. | "sectionHeader" | "captionRegular" | "captionRegularTall" | "captionMedium" | "body" | "headingSmall" | "headingLarge" | "display" |
color | ColorType? |
Determines the color of the text. | "TextNeutral" | "TextSubdued" | "TextDisabled" | "TextWarning" | "TextCritical" | "TextSuccess" | "TextInteractive" | "TextHighlight" |
- Use only one header (
"headingLarge"
) per view, at the top of each view.
Content guidelines
Anchor link to section titled "Content guidelines"Headers ("headingLarge"
) should orient the merchant as to where they are in the app, provide an instruction, indicate an action that’s being performed, or reflect a state (success or failure).
- Orientation: "Customers"
- Instruction: "Select payment option"
- Progress: "Reading card…"
- State: "Payment approved"