@spark-web/text v5.2.0
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.
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
7 months ago
10 months ago
7 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
9 months ago
9 months ago
9 months ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago