Typography

Typography component for consistent text styling

import { Typography } from "@tetherto/mdk-react-devkit";

Prop	Status	Type	Default	Description
`variant`	Optional	`"body" \| "caption" \| "secondary" \| "heading1" \| "heading2" \| "heading3" \| undefined`	`'body'`	Typography variant
`size`	Optional	`"sm" \| "md" \| "lg" \| "xs" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| undefined`	`undefined (uses variant default)`	Text size
`weight`	Optional	`"medium" \| "normal" \| "light" \| "semibold" \| "bold" \| undefined`	`undefined (uses variant default)`	Font weight
`align`	Optional	`TextAlign \| undefined`	—	Text alignment
`color`	Optional	`"success" \| "warning" \| "error" \| "primary" \| "default" \| "muted" \| undefined`	—	Text color variant
`truncate`	Optional	`boolean \| undefined`	—	Truncate text with ellipsis
`className`	Optional	`string \| undefined`	—	Custom className

Usage

Single component for all text rendering. Pick a semantic variant to get the right element + base style; override size / weight / color ad hoc when needed.

Notes

Use variant over raw <h1>/<p> tags so headings stay on-token.
For numeric labels in cards, prefer <Typography variant="heading3"> with color="muted" instead of inventing inline styles.

Example

/** * Runnable example for Typography. */import { Typography } from '@tetherto/mdk-react-devkit'export const TypographyExample = () => {  return (    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>      <Typography variant="heading1">Operations dashboard</Typography>      <Typography variant="heading2">Sites</Typography>      <Typography variant="heading3">Site #1</Typography>      <Typography variant="body">        A high-level summary of your sites, devices, and active alerts.      </Typography>      <Typography variant="secondary">Last refreshed 12 seconds ago.</Typography>      <Typography variant="caption" color="muted">        Updated 12s ago      </Typography>    </div>  )}