Linksibling
Use Link for clickable textText
Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.
Setup
import { Text } from '@fragments-sdk/ui';Examples
Sizes
Different text sizes
Loading preview...
Weights
Different font weights
Loading preview...
Colors
Different text colors
Loading preview...
Semantic Elements
Using appropriate HTML elements
Loading preview...
Monospace
Monospace font for code-like text
Loading preview...
Truncation
Text truncation with ellipsis
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Text content |
as | enumh1h2h3h4h5h6pspanlabeldivstrongemsmallmarkdelinssubsuptimeaddressblockquotecitecodeabbr | span | HTML element to render |
variant | enumsection-label | Not set | Preset text variant |
size | enum2xsxssmbasemdlgxl2xl | Not set | Font size (md is an alias for base) |
weight | enumnormalmediumsemiboldbold | "normal" | Font weight |
color | enumprimarysecondarytertiarymuted | "primary" | Text color (muted is an alias for tertiary) |
font | enumsansmono | sans | Font family |
truncate | boolean | Not set | Truncate with ellipsis on overflow |
lineClamp | number | Not set | Number of lines before truncating (requires truncate) |
style | object | Not set | — |
Usage Guidelines
When to use
- Displaying text with specific typography styles
- Creating headings, paragraphs, or labels
- Text that needs truncation or line clamping
- Consistent typography across the application
When not to use
- Complex rich text (use a rich text editor)
- Code display (use CodeBlock)
- Interactive text (use Link or Button)
Best practices
- Use semantic elements (h1-h6, p) via the "as" prop
- Maintain heading hierarchy for accessibility
- Use color variants sparingly for visual hierarchy
- Consider truncation for user-generated content
Accessibility
- Use proper heading levels (h1-h6) for document structure
- Semantic elements convey meaning to screen readers
- Truncated text should have full content in title/tooltip