Components
Typography
Text in the theme's type scale.
Typography renders text with one of the theme's variants. variant decides how the text looks.
variantMapping or component decides which element it is. It is a Server Component.
import Typography from '@hone-ui/react/Typography';Examples
Title
Muted body text
Looks like h3, is an h2
One line with an ellipsis when it overflows
<Typography variant="h4" component="h1" gutterBottom>Title</Typography>
<Typography color="text.secondary">Muted body text</Typography>
<Typography variant="h3" variantMapping={{ h3: 'h2' }}>Looks like h3, is an h2</Typography>
<Typography noWrap>One line with an ellipsis when it overflows</Typography>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'h1' to 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'overline', 'button', 'inherit' | 'body1' | The look. |
variantMapping | partial map from variant to element | see below | Overrides the element per variant. |
component | ElementType | from the variant | The element. Wins over variantMapping. |
align | 'inherit', 'left', 'center', 'right', 'justify' | 'inherit' | Text alignment. |
noWrap | boolean | false | Truncates to one line with an ellipsis. |
gutterBottom | boolean | false | Adds a 0.35em bottom margin. |
paragraph | boolean | false | Renders a p with a 16px bottom margin. |
color | palette color, 'textPrimary', 'textSecondary', 'textDisabled', a palette path such as 'text.secondary', any CSS color, or 'inherit' | none | The text color. |
sx, className, style, ref, children | Standard. |
By default h1 to h6 render h1 to h6, subtitle1 and subtitle2 render h6, body1,
body2 and inherit render p, and the rest render span.
Notes
- Typography does not read
components.Typography.defaultProps. variantis a closed union, so a typo such as"h9"fails to type-check. To use a variant your theme adds, merge its name intoTypographyPropsVariantOverrideswithdeclare module '@hone-ui/react/Typography' { interface TypographyPropsVariantOverrides { poster: true } }. Map a built-in name tofalseto remove it from the type.colorsets a private CSS variable, sosx={{ color }}still wins.
Accessibility
The variant sets the look, not the heading level. Choose the element so headings nest in order,
and use one h1 per page.