Text
The Text component is used to render text in different sizes, colors, and alignments.
optional = ?
Name | Type | Description |
---|---|---|
appearance? | "critical" | "code" | "subdued" | "success" |
|
emphasized? | boolean |
|
id? | string |
Unique identifier. Typically used as a target for another component’s controls to associate an accessible label with an action. |
size? | "extraSmall" | "small" | "base" | "medium" | "large" | "extraLarge" |
|
strong? | boolean |
Guidelines
Anchor link to section titled "Guidelines"Do not nest other components other than Text, they will be ignored and not rendered. Nested Text will be used to render the content of Text.
✅ Do | 🛑 Don't |
---|---|
Use Text to add rich content to your extension | Use the Text component for headings or block element text. Use Heading and TextBlock components instead. |
Use size to (de)-emphasize your content |