MetricText

MetricText is a token-backed typography component to display metrics.

Basic

Use a MetricText component to display numerical information. There are three sizes available via the size prop:

'large' for numbers in the middle of large donut charts.
'medium' for numbers in the middle of medium donut charts.
'small' for numbers in the middle of small donut charts and single-value tiles.

Large

$100costs saved

import type { JSX } from 'react';

import { cssMap, jsx } from '@compiled/react';

import { MetricText } from '@atlaskit/primitives/compiled/metric-text';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';
import { token } from '@atlaskit/tokens';

export default (): JSX.Element => {
	return (
		<Stack space="space.100">
			<div css={styles.innerCircle}>
				<MetricText size="large">$100</MetricText>
				<Text size="small" color="color.text.subtle">
					costs saved
				</Text>
			</div>
		</Stack>
	);
};

const styles = cssMap({
	innerCircle: {
		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center',
		flexDirection: 'column',
		width: '200px',
		height: '200px',
		borderRadius: token('radius.full'),
		backgroundColor: token('elevation.surface'),
		borderInlineStartColor: token('color.border.accent.magenta'),
		borderInlineStartWidth: '32px',
		borderInlineEndColor: token('color.border.accent.lime'),
		borderInlineEndWidth: '32px',
		borderBlockStartColor: token('color.border.accent.orange'),
		borderBlockStartWidth: '32px',
		borderBlockEndColor: token('color.border.accent.teal'),
		borderBlockEndWidth: '32px',
		borderStyle: 'solid',
	},
});

Medium

93%complete

import type { JSX } from 'react';

import { cssMap, jsx } from '@compiled/react';

import { MetricText } from '@atlaskit/primitives/compiled/metric-text';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';
import { token } from '@atlaskit/tokens';

export default (): JSX.Element => {
	return (
		<Stack space="space.100">
			<div css={styles.innerCircle}>
				<MetricText size="medium">93%</MetricText>
				<Text size="small" color="color.text.subtle">
					complete
				</Text>
			</div>
		</Stack>
	);
};

const styles = cssMap({
	innerCircle: {
		display: 'flex',
		justifyContent: 'center',
		alignItems: 'center',
		flexDirection: 'column',
		width: '140px',
		height: '140px',
		borderRadius: token('radius.full'),
		backgroundColor: token('elevation.surface'),
		borderInlineStartColor: token('color.border.accent.orange'),
		borderInlineStartWidth: '16px',
		borderInlineEndColor: token('color.border.accent.teal'),
		borderInlineEndWidth: '16px',
		borderBlockStartColor: token('color.border.accent.magenta'),
		borderBlockStartWidth: '16px',
		borderBlockEndColor: token('color.border.accent.lime'),
		borderBlockEndWidth: '16px',
		borderStyle: 'solid',
	},
});

Small

3 in review3/5 projects in review

import React from 'react';

import { cssMap } from '@atlaskit/css';
import ChartPieIcon from '@atlaskit/icon/core/chart-pie';
import { Box } from '@atlaskit/primitives/compiled/box';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { MetricText } from '@atlaskit/primitives/compiled/metric-text';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import { Text } from '@atlaskit/primitives/compiled/text';
import { token } from '@atlaskit/tokens';

const styles = cssMap({
	container: {
		width: '300px',
	},
	statsCard: {
		backgroundColor: token('elevation.surface'),
		borderWidth: token('border.width.selected'),
		borderColor: token('color.border'),
		borderStyle: 'solid',
		paddingBlockStart: token('space.150'),
		paddingInlineEnd: token('space.150'),
		paddingBlockEnd: token('space.150'),
		paddingInlineStart: token('space.150'),
		borderRadius: token('radius.small'),
	},
});

export default (): React.JSX.Element => {
	return (
		<Box xcss={styles.container}>
			<Inline space="space.200" xcss={styles.statsCard} grow="hug" alignBlock="center">
				<ChartPieIcon label="" color={token('color.icon.subtle')} />
				<Stack space="space.025">
					<MetricText size="small">3 in review</MetricText>
					<Text size="small" color="color.text.subtle">
						3/5 projects in review
					</Text>
				</Stack>
			</Inline>
		</Box>
	);
};

Alignment

MetricText can be aligned using the align prop.

Text alignment:Start

Text alignment:Center

Text alignment:End

import React from 'react';

import { MetricText } from '@atlaskit/primitives/compiled/metric-text';
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">Text alignment:</Text>
				<MetricText size="small" align="start">
					Start
				</MetricText>
			</Stack>
			<Stack space="space.0">
				<Text align="center">Text alignment:</Text>
				<MetricText size="small" align="center">
					Center
				</MetricText>
			</Stack>
			<Stack space="space.0">
				<Text align="end">Text alignment:</Text>
				<MetricText size="small" align="end">
					End
				</MetricText>
			</Stack>
		</Stack>
	);
};

Was this page helpful?

We use this feedback to improve our documentation.