Tag

A tag is a subtle, compact label used to categorize and organize content.

Default

The default form of a tag, where text is required. Tags with static text can be used as a flag or as a reference to an object or attribute. By default, tags are removable.

Design

import React from 'react';

import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => <Tag text="Design" />;

Add a tag

Add and remove a tag to see its enter and exit motion.

import React, { useState } from 'react';

import Button from '@atlaskit/button/default/button';
import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import Tag from '@atlaskit/tag/tag-new';

const tagNames = [
	'Design',
	'Engineering',
	'Research',
	'A realllllllllllllllllyyyyyyyyyyyyyyyy long tag name that should be truncated',
];

export default function AddTagExample(): React.JSX.Element {
	const [tag, setTag] = useState<string>();
	const [nextTagIndex, setNextTagIndex] = useState(0);

	const addTag = () => {
		setTag(tagNames[nextTagIndex % tagNames.length]);
		setNextTagIndex((index) => index + 1);
	};

	return (
		<Stack space="space.150" alignInline="start">
			<Button isDisabled={tag !== undefined} onClick={addTag}>
				Add tag
			</Button>
			<ExitingPersistence>
				{tag && (
					<Tag
						key={tag}
						text={tag}
						removeButtonLabel="Remove"
						onAfterRemoveAction={() => setTag(undefined)}
					/>
				)}
			</ExitingPersistence>
		</Stack>
	);
}

Colors

Tags are available in a range of colors to help you organize and categorize information.

GrayBlueRedYellowGreenTealPurpleLimeOrangeMagenta

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => (
	<Stack space="space.100" alignInline="start">
		<Tag text="Gray" color="gray" />
		<Tag text="Blue" color="blue" />
		<Tag text="Red" color="red" />
		<Tag text="Yellow" color="yellow" />
		<Tag text="Green" color="green" />
		<Tag text="Teal" color="teal" />
		<Tag text="Purple" color="purple" />
		<Tag text="Lime" color="lime" />
		<Tag text="Orange" color="orange" />
		<Tag text="Magenta" color="magenta" />
	</Stack>
);

Link

A tag with an href can link to more information on the tagged item.

Design

import React from 'react';

import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => <Tag text="Design" href="https://atlassian.design" />;

Non-removable

Set isRemovable to false to prevent users from removing the tag. Tags are removable by default.

Design

import React from 'react';

import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => <Tag text="Design" isRemovable={false} />;

With icon

Use elemBefore to add an icon or other element before the tag text.

Featured

import React from 'react';

import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => (
	<Tag text="Featured" elemBefore={<StarUnstarredIcon label="" size="small" />} />
);

Link with icon

Tags can combine both a link and an icon element.

Featured

import React from 'react';

import StarUnstarredIcon from '@atlaskit/icon/core/star-unstarred';
import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => (
	<Tag
		text="Featured"
		href="https://atlassian.design"
		elemBefore={<StarUnstarredIcon label="" size="small" />}
	/>
);

Max width

Use maxWidth to control the maximum width of the tag. When the tag exceeds this width, it will be truncated with an ellipsis.

This is a tag with a very long text that will be truncatedThis is a tag with a very long text that will be truncatedThis is a tag with a very long text that will be truncated

import React from 'react';

import { Stack } from '@atlaskit/primitives/compiled/stack';
import Tag from '@atlaskit/tag/removable-tag';

export default (): React.JSX.Element => (
	<Stack space="space.100">
		<Tag text="This is a tag with a very long text that will be truncated" />
		<Tag text="This is a tag with a very long text that will be truncated" maxWidth="300px" />
		<Tag text="This is a tag with a very long text that will be truncated" maxWidth="100px" />
	</Stack>
);

Trailing metric

Use trailingMetric to render a trailing metric after the tag text for compact counts or short supplementary values. The trailing metric uses background subtler accent tokens.

Comments24Updates99+Issues7Sprints2Members12

import React from 'react';

import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import Tag from '@atlaskit/tag/tag-new';

export default (): React.JSX.Element => (
	<Stack space="space.100">
		<Inline space="space.100" alignBlock="center">
			<Tag text="Comments" trailingMetric={24} isRemovable={false} />
			<Tag text="Updates" color="blue" trailingMetric="99+" isRemovable={false} />
			<Tag text="Issues" color="red" trailingMetric={7} isRemovable={false} />
			<Tag text="Sprints" color="green" trailingMetric={2} isRemovable={false} />
			<Tag text="Members" color="purple" trailingMetric={12} isRemovable={false} />
		</Inline>
	</Stack>
);

Swatch before

Tags that use color as a wayfinding method (such as Jira epic or parent labels) can leverage the swatchBefore property to increase prominence of that color. Pass true to use the tag's own color, or pass a background design token to use a custom color.

This prop is early access and may be changed in the future.

Project A

Project B

import React from 'react';

import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import Tag from '@atlaskit/tag/removable-tag';
import { token } from '@atlaskit/tokens';

export default (): React.JSX.Element => (
	<Stack space="space.100">
		<Inline>
			<Tag text="Project A" color="blue" swatchBefore isRemovable={false} />
		</Inline>
		<Inline>
			<Tag
				text="Project B"
				color="blue"
				swatchBefore={token('color.background.accent.blue.subtler')}
				isRemovable={false}
			/>
		</Inline>
	</Stack>
);

Was this page helpful?

We use this feedback to improve our documentation.