Skip to main content

Text

Displays text with specific visual styles or tones. Use to present content with appropriate emphasis, hierarchy, or tone.

Note

Text on mobile surfaces is blockish, rather than inline.

Anchor to propertiesProperties

Anchor to color
color
Default: 'base'

Modify the color to be more or less intense.

Anchor to id
id
string

A unique identifier for the element.

Anchor to tone
tone
| 'auto' | 'neutral' | 'info' | 'success' | 'caution' | 'warning' | 'critical'
Default: 'auto'

Sets the tone of the component, based on the intention of the information being conveyed.

Anchor to type
type
'strong' | 'small' | 'generic'
Default: 'generic'

Provide semantic meaning and default styling to the text.

Other presentation properties on Text override the default styling.

Was this section helpful?

Code

<s-text>
<s-text type="strong">Name:</s-text> Jane Doe
</s-text>

Preview