Text
Displays text with specific visual styles or tones. Use to emphasize or differentiate words or phrases within a Paragraph or other block-level components.
Note
Text on mobile surfaces is blockish, rather than inline.
Anchor to propertiesProperties
- Anchor to colorcolor'subdued' | 'base' | 'strong'
- Anchor to tonetone| 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
- Anchor to typetype'strong' | 'small' | 'generic'
Was this section helpful?
Code
<s-text>Text</s-text>
<s-text color="subdued">Text</s-text>
<s-text tone="info">Text</s-text>
<s-text tone="success">Text</s-text>
<s-text tone="warning">Text</s-text>
<s-text tone="critical">Text</s-text>
Examples
Code
Default
<s-text>Text</s-text> <s-text color="subdued">Text</s-text> <s-text tone="info">Text</s-text> <s-text tone="success">Text</s-text> <s-text tone="warning">Text</s-text> <s-text tone="critical">Text</s-text>
Preview
