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 |
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 |