Typography
Typography
Renders text using the Hub type scale, pulling font family, weight, size, line height, and letter spacing from tokens. The color prop is a semantic enum, not the MUI palette.
Examples
Scale
Loading preview
<Typography variant="h4">Heading</Typography>
<Typography variant="body1">Body copy</Typography>
<Typography variant="caption" color="secondary">Caption</Typography>Semantic colors
Loading preview
<Typography color="warning">Warning</Typography>
<Typography color="danger">Danger</Typography>API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'display' | 'h1'..'h6' | 'bodyLarge' | 'body1' | 'body2' | 'caption' | 'label' | 'labelSmall' | 'code' | body1 | Text style variant. |
color | 'inherit' | 'primary' | 'secondary' | 'muted' | 'danger' | 'warning' | 'success' | inherit | Semantic color token. |
align | 'left' | 'center' | 'right' | none | Horizontal alignment. |
truncate / lineClamp | boolean / number | none | Single-line or N-line ellipsis. |
Guidelines
Do
- Map headings to primary and captions to secondary.
- Use warning for caution text, not danger.
Avoid
- Do not use the MUI palette names; the color prop is semantic.