Typography, Asgard Docs

Data display

Consistent, themed text.

Typography provides a consistent text styling system with predefined variants for headings, subtitles, body text, and utility styles.

Key features:

13 variants: h1–h6, subtitle1/subtitle2, body1/body2, button, caption, overline
Auto-maps variants to semantic HTML tags with component override
Theme-aware colors: primary, secondary, disabled, error, etc.
gutterBottom spacing, noWrap truncation, and weight override

Loading preview…

When to use it

Headings and section titles
Body copy and captions
Muted / secondary and semantic text
Overlines, buttons labels and truncated single lines

Properties

Prop	Type	Default	Description
`variant`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'subtitle1' \| 'subtitle2' \| 'body1' \| 'body2' \| 'button' \| 'caption' \| 'overline'`	—	The typographic style variant to apply.
`color`	`'primary' \| 'secondary' \| 'disabled' \| 'error' \| 'success' \| 'warning' \| 'info' \| 'inherit'`	`'inherit'`	Text color drawn from the theme palette.
`component`	`'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'span' \| 'div' \| 'p'`	—	Override the rendered HTML element. Defaults to the semantic tag matching the variant.
`align`	`'left' \| 'center' \| 'right' \| 'justify'`	`'left'`	Text alignment within the container.
`weight`	`'normal' \| 'medium' \| 'bold'`	—	Font weight override independent of the variant default.
`gutterBottom`	`boolean`	`false`	When true, adds bottom margin for spacing between text blocks.
`noWrap`	`boolean`	`false`	When true, truncates text with an ellipsis instead of wrapping.

Notes

The component tag defaults to the semantic HTML element matching the variant (e.g., h1 variant renders an h1 tag). Override this with the component prop when you need a different DOM element.
Use gutterBottom to add consistent spacing between successive Typography elements without manual margin styles.

Presets