Typography component
A flexible text primitive with variant, alignment, truncation, and full styled-system support.
Variants map to semantic HTML elements via variantMapping. Pass as to override the element while keeping variant styles.
Typography
Renders as <p> by default. The variant prop controls both the visual scale and the HTML element. All styled-system prop groups are supported, plus five Typography-specific props.
Examples
Default
Great products are built through clarity, consistency, and attention to detail.
<Typography
variant="body1"
>
Great products are built through clarity, consistency, and attention to detail.
</Typography>
All Variants
h1
The quick brown fox
h2
The quick brown fox
h3
The quick brown fox
h4
The quick brown fox
h5
The quick brown fox
h6
The quick brown fox
subtitle1
The quick brown fox
subtitle2
The quick brown fox
body1
The quick brown fox
body2
The quick brown fox
captionThe quick brown fox
overlineThe quick brown fox
buttonThe quick brown fox
<Flex>
{(
[
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'subtitle1',
'subtitle2',
'body1',
'body2',
'caption',
'overline',
'button',
] as const
).map((v) => (
<Flex key={v} flexDirection="row" alignItems="center" mb={1}>
<Typography variant="caption" color="secondary" width="6rem" flexShrink={0} m={0}>
{v}
</Typography>
<Typography variant={v} m={0}>
The quick brown fox
</Typography>
</Flex>
))}
</Flex>
Alignment
left
The quick brown fox jumps over the lazy dog.
center
The quick brown fox jumps over the lazy dog.
right
The quick brown fox jumps over the lazy dog.
justify
Justify only stretches lines that wrap - the last line stays left. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump.
<Flex width="360px">
{(['left', 'center', 'right', 'justify'] as const).map((align) => (
<View key={align} mb={3}>
<Typography variant="caption" color="secondary" mb={0.5} m={0}>
{align}
</Typography>
<Typography variant="body1" align={align} m={0}>
{ALIGN_TEXT[align]}
</Typography>
</View>
))}
</Flex>
Colors
inherit
The quick brown fox
initial
The quick brown fox
primary
The quick brown fox
secondary
The quick brown fox
disabled
The quick brown fox
error
The quick brown fox
success
The quick brown fox
info
The quick brown fox
warning
The quick brown fox
<Flex p={3}>
{(
[
'inherit',
'initial',
'primary',
'secondary',
'disabled',
'error',
'success',
'info',
'warning',
] as const
).map((c) => (
<Flex key={c} flexDirection="row" alignItems="center" mb={1}>
<Typography variant="caption" color="secondary" width="6rem" flexShrink={0} m={0}>
{c}
</Typography>
<Typography variant="body1" color={c} m={0}>
The quick brown fox
</Typography>
</Flex>
))}
</Flex>
Letter Spacing
tighter
The quick brown fox
tight
The quick brown fox
normal
The quick brown fox
wide
The quick brown fox
wider
The quick brown fox
widest
The quick brown fox
<Flex>
{(['tighter', 'tight', 'normal', 'wide', 'wider', 'widest'] as const).map((ls) => (
<Flex key={ls} flexDirection="row" alignItems="baseline" mb={1}>
<Typography variant="caption" color="secondary" width="5rem" flexShrink={0} m={0}>
{ls}
</Typography>
<Typography variant="body1" letterSpacing={ls} m={0}>
The quick brown fox
</Typography>
</Flex>
))}
</Flex>
Line Heights
none
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
tight
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
snug
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
base
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
relaxed
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
loose
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
<Flex>
{(['none', 'tight', 'snug', 'base', 'relaxed', 'loose'] as const).map((lh) => (
<Flex key={lh} flexDirection="row" alignItems="flex-start" mb={2}>
<Typography variant="caption" color="secondary" width="5rem" flexShrink={0} mt={0} mb={0}>
{lh}
</Typography>
<Typography variant="body2" lineHeight={lh} m={0} maxWidth="320px">
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
</Typography>
</Flex>
))}
</Flex>
No Wrap
This very long text will be truncated with an ellipsis when it overflows its container.
↑ noWrap (240px container)<View width="240px" border="1px dashed" borderColor="light" p={1.5}>
<Typography variant="body1" noWrap m={0}>
This very long text will be truncated with an ellipsis when it overflows its container.
</Typography>
<Typography variant="caption" color="secondary" mt={1} mb={0}>
↑ noWrap (240px container)
</Typography>
</View>
Gutter Bottom
Heading with gutterBottom
This paragraph follows directly after the heading. The gutter (0.5em) creates breathing room between them without extra margin props.
<View border="1px dashed" borderColor="light" p={1.5} maxWidth="480px">
<Typography variant="h4" gutterBottom>
Heading with gutterBottom
</Typography>
<Typography variant="body1" m={0}>
This paragraph follows directly after the heading. The gutter (0.5em) creates breathing room
between them without extra margin props.
</Typography>
</View>
Composed
<Flex as="article" maxWidth="480px">
<Typography variant="overline" color="secondary" m={0}>
Design system
</Typography>
<Typography variant="h2" gutterBottom mt={0}>
Typography component
</Typography>
<Typography variant="subtitle1" color="secondary" m={0}>
A flexible text primitive with variant, alignment, truncation, and full styled-system
support.
</Typography>
<Typography variant="body2" mt={2} mb={0}>
Variants map to semantic HTML elements via{' '}
<Typography as="code" variant="inherit">
variantMapping
</Typography>
. Pass{' '}
<Typography as="code" variant="inherit">
as
</Typography>{' '}
to override the element while keeping variant styles.
</Typography>
<Typography variant="caption" color="secondary" mt={1} mb={0}>
Last updated: 2026
</Typography>
</Flex>