title: Text storybookPath: typography-text--default isExperimentalPackage: false
Constrained, purposeful text styles as a component.
Examples
const textSizes = ['large', 'standard', 'small', 'xsmall'];
return (
<Columns collapseBelow="tablet" gap="xlarge">
<Stack gap="large">
{textSizes.map(textSize => (
<Text key={textSize} size={textSize} weight="regular">
Text {textSize} regular
</Text>
))}
</Stack>
<Stack gap="large">
{textSizes.map(textSize => (
<Text key={textSize} size={textSize} weight="semibold">
Text {textSize} regular
</Text>
))}
</Stack>
</Columns>
);
Align
Text can be aligned with the align
prop.
<Stack gap="large" dividers>
<Text align="left">Left (default)</Text>
<Text align="center">Center</Text>
<Text align="right">Right</Text>
</Stack>
Overflow strategy
Use the overflowStrategy
prop to manage how Text
behaves with regard to
overflow.
const overflowStrategies = ['truncate', 'nowrap', 'breakword'];
return (
<Stack gap="large" style={{ width: 200 }}>
<Stack gap="small">
<Text weight="semibold">Default</Text>
<Text>The quick brown fox jumps over the lazy dog.</Text>
</Stack>
{overflowStrategies.map(overflowStrategy => (
<Stack key={overflowStrategy} gap="small">
<Text weight="semibold">{overflowStrategy}</Text>
<Text overflowStrategy={overflowStrategy}>
The quick brown fox jumps over the lazy dog.
</Text>
</Stack>
))}
</Stack>
);
Tone
The foreground colour of text can be set by applying a tone
. In addition to
the foundation tones, “muted” provides a way to de-emphasise text.
const textTones = [
'neutral', // Default
'accent',
'caution',
'critical',
'disabled',
'fieldAccent',
'info',
'link',
'muted',
'placeholder',
'positive',
'primary',
'primaryActive',
'primaryHover',
'secondary',
'secondaryActive',
'secondaryHover',
];
return (
<Columns collapseBelow="tablet" gap="large" template={[1, 1]}>
{textTones.map(tone => (
<Text key={tone} tone={tone}>
{tone}
</Text>
))}
</Columns>
);
Weight
Text is available in two weight: regular
and semibold
.
<Inline gap="small">
<Text weight="regular">Regular</Text>
<Text weight="semibold">Semibold</Text>
</Inline>
Contrast
To ensure text has sufficient contrast, when on a dark background the foreground tones “neutral” and “muted” will be inverted.
<Inline gap="large">
<Box background="neutral" padding="small" borderRadius="small">
<Text>neutral</Text>
</Box>
<Box background="neutral" padding="small" borderRadius="small">
<Text tone="muted">muted</Text>
</Box>
</Inline>
Props
Extra props are also passed into the underlying Box
component.