Text

Text is a token-backed typography component to display body text.

Size

Use a Text component for main content. Text typically appears after headings or subheadings as detailed descriptions and messages, but also as standalone text in components.

The size prop expresses the visual appearance of the text element:

'large' is for long-form content. Use this size for a comfortable reading experience such as in blogs.
'medium' is the default size in components or where space is limited, for detailed or descriptive content such as primary descriptions in flags.
'small' should be used sparingly and is for secondary level content such as fine print or semantic messaging.

Text size: largeText size: medium (default)Text size: small

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Text size="large">Text size: large</Text>
			<Text>Text size: medium (default)</Text>
			<Text size="small">Text size: small</Text>
		</Stack>
	);
};

Color

Text uses the color.text token which automatically switches colors to be legible across both light and dark modes.

Text will automatically apply the correct inverse color token if placed within a box component with a bold background color.

Text color is default.

Text color is automatically inverted.

import React from 'react';

import { Box } from '@atlaskit/primitives/compiled/box';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Box backgroundColor="color.background.information" padding="space.200">
				<Text weight="bold">Text color is default.</Text>
			</Box>
			<Box backgroundColor="color.background.brand.bold" padding="space.200">
				<Text weight="bold">Text color is automatically inverted.</Text>
			</Box>
			<Box backgroundColor="color.background.warning.bold" padding="space.200">
				<Text weight="bold">Text color is automatically inverted.</Text>
			</Box>
		</Stack>
	);
};

The color prop can be used with any text color token. If Text is nested inside another Text component, color will automatically inherit from its parent.

Text color is inherited from its parent.Text color can also be overriden.

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Text weight="medium" color="color.text.discovery">
				Text color <Text weight="bold">is inherited</Text> from its parent.
			</Text>
			<Text weight="medium" color="color.text.accent.purple">
				Text color{' '}
				<Text weight="bold" color="color.text.accent.purple.bolder">
					can also be overriden.
				</Text>
			</Text>
		</Stack>
	);
};

Font weight

Font weight defaults to regular (400) and can be set using the weight prop. More information about the available weights can be found on the typography foundations page. Text elements can be nested to change the weight of specific words.

Note: Text supports the semibold weight, however due to differences between font stacks across different operating systems, semibold text may render as bold. We recommend using regular, medium, and bold for the best results.

Text weight: regular (default)Text weight: mediumText weight: semiboldText weight: boldText with bold in a sentence

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Text>Text weight: regular (default)</Text>
			<Text weight="medium">Text weight: medium</Text>
			<Text weight="semibold">Text weight: semibold</Text>
			<Text weight="bold">Text weight: bold</Text>
			<Text>
				Text with <Text weight="bold">bold</Text> in a sentence
			</Text>
		</Stack>
	);
};

Alignment

Text can be aligned using the align prop.

Text alignment:

Start

Text alignment:

Center

Text alignment:

End

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Stack space="space.0">
				<Text align="start" as="p">
					Text alignment:
				</Text>
				<Text align="start" as="p">
					Start
				</Text>
			</Stack>
			<Stack space="space.0">
				<Text align="center" as="p">
					Text alignment:
				</Text>
				<Text align="center" as="p">
					Center
				</Text>
			</Stack>
			<Stack space="space.0">
				<Text align="end" as="p">
					Text alignment:
				</Text>
				<Text align="end" as="p">
					End
				</Text>
			</Stack>
		</Stack>
	);
};

Rendered HTML element

Text renders a HTML  element by default. Use the as prop to change the rendered HTML element.

Text as (default)

Text as

Text as Text as 

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Text>Text as {'<span>'} (default)</Text>
			<Text as="p">Text as {'<p>'}</Text>
			<Text as="strong">Text as {'<strong>'}</Text>
			<Text as="em">Text as {'<em>'}</Text>
		</Stack>
	);
};

Arrangement with other text styles

Text does not apply any vertical margin or spacing. To control space between text and other content, use a stack component.

The available values for paragraph spacing are outlined in the Typography foundations page.

Update profile image

Add a profile image to personalize your account and help others recognize you.Would you like to upload a new profile picture now?

import type { JSX } from 'react';

import Button from '@atlaskit/button/default/button';
import { cssMap, jsx } from '@atlaskit/css';
import Heading from '@atlaskit/heading/heading';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';
import { token } from '@atlaskit/tokens';

const styles = cssMap({
	card: {
		borderRadius: token('radius.large'),
		boxShadow: token('elevation.shadow.overlay'),
		width: '400px',
	},
});

export default (): JSX.Element => {
	return (
		<Box backgroundColor="elevation.surface.overlay" padding="space.300" xcss={styles.card}>
			<Stack space="space.200">
				<Heading size="medium">Update profile image</Heading>
				<Stack space="space.200">
					<Text>
						Add a profile image to personalize your account and help others recognize you.
					</Text>
					<Text>Would you like to upload a new profile picture now?</Text>
				</Stack>
				<Inline space="space.100" alignInline="end">
					<Button appearance="subtle">Skip for now</Button>
					<Button appearance="primary">Upload</Button>
				</Inline>
			</Stack>
		</Box>
	);
};

Truncation

Avoid truncation whenever possible.

If truncation cannot be avoided, for example when displaying user-generated content, use the maxLines prop to indicate how text should be truncated.

This text truncates within one line and displays an ellipsis at the end of the content to indicate truncation has occurred.This text truncates within two lines and displays an ellipsis at the end of the content to indicate truncation has occurred.This text truncates within three lines and displays an ellipsis at the end of the content to indicate truncation has occurred.

import type { JSX } from 'react';

import { cssMap, jsx } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';

const styles = cssMap({
	box: {
		width: '220px',
	},
});

export default (): JSX.Element => {
	return (
		<Box xcss={styles.box}>
			<Stack space="space.300">
				<Text maxLines={1}>
					This text truncates within one line and displays an ellipsis at the end of the content to
					indicate truncation has occurred.
				</Text>
				<Text maxLines={2}>
					This text truncates within two lines and displays an ellipsis at the end of the content to
					indicate truncation has occurred.
				</Text>
				<Text maxLines={3}>
					This text truncates within three lines and displays an ellipsis at the end of the content
					to indicate truncation has occurred.
				</Text>
			</Stack>
		</Box>
	);
};

Customization

A restricted set of styles can be customized using the xcss prop, using cssMap.

The allowed customizations are:

font modifications via fontVariantNumeric: 'tabular-nums' and fontVariantNumeric: 'slashed-zero'
strikethrough via textDecorationLine
line breaks via overflowWrap

Tabular numbers: 1234567890Slashed zero: 1234567890Striked through text

Default overflow wrap with a really long word Vierhundertvierundvierzigtausendvierhundertvierundvierzig that can break to avoid overflowing its container.

Custom overflow wrap with a really long word Vierhundertvierundvierzigtausendvierhundertvierundvierzig that overflows its container.

import React from 'react';

import { cssMap } from '@atlaskit/css';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';
import { token } from '@atlaskit/tokens';

const styles = cssMap({
	customStylesContainer: {
		width: '200px',
		borderWidth: token('border.width.selected'),
		borderColor: token('color.border.accent.magenta'),
		borderStyle: 'solid',
	},
	customTextDecorationLine: { textDecorationLine: 'line-through' },
	customOverflowWrap: { overflowWrap: 'normal' },
	customTabularNums: { fontVariantNumeric: 'tabular-nums' },
	customSlashedZero: { fontVariantNumeric: 'slashed-zero' },
});

export default (): React.JSX.Element => {
	return (
		<Stack space="space.100">
			<Text xcss={styles.customTabularNums}>Tabular numbers: 1234567890</Text>
			<Text xcss={styles.customSlashedZero}>Slashed zero: 1234567890</Text>
			<Text xcss={styles.customTextDecorationLine}>Striked through text</Text>
			<Inline space="space.100">
				<Box xcss={styles.customStylesContainer}>
					<Text>
						Default overflow wrap with a really long word
						Vierhundertvierundvierzigtausendvierhundertvierundvierzig that can break to avoid
						overflowing its container.
					</Text>
				</Box>
				<Box xcss={styles.customStylesContainer}>
					<Text xcss={styles.customOverflowWrap}>
						Custom overflow wrap with a really long word
						Vierhundertvierundvierzigtausendvierhundertvierundvierzig that overflows its container.
					</Text>
				</Box>
			</Inline>
		</Stack>
	);
};

Was this page helpful?

We use this feedback to improve our documentation.