Tags

import { ... } from '@ag.ds-next/react/tags';

Do

• use when content has multiple categories
• use with or without links
• add to a page to improve SEO
• use links to filter/group data types
• precede them with an appropriate heading.

Don’t

• use as a status indicator – use StatusBadge
• overwrite Tag colours or fills.
• use Tags with links and remove buttons together, as it is confusing for users.

Tags with links

A list of related tags that use links.

Note: An appropriate heading level should be used to introduce the purpose of the list.

<Tags
	heading={
		<Text as="h2" fontWeight="bold">
			Tags:
		</Text>
	}
	items={[
		{ href: '#', label: 'Foo' },
		{ href: '#', label: 'Bar' },
		{ href: '#', label: 'Baz' },
	]}
/>

Tags without links

A list of related tags without links.

<Tags
	heading={
		<Text as="h2" fontWeight="bold">
			Tags:
		</Text>
	}
	items={[{ label: 'Foo' }, { label: 'Bar' }, { label: 'Baz' }]}
/>

Removable tags

Tags can be removed from a list, if you add an onRemove function.

Please avoid using Tags with links and remove buttons together, as it is confusing for users.

<Tags
	heading={
		<Text as="h2" fontWeight="bold">
			Tags:
		</Text>
	}
	items={[
		{
			label: 'Foo',
			onRemove: console.log,
		},
		{
			label: 'Bar',
			onRemove: console.log,
		},
		{
			label: 'Baz',
			onRemove: console.log,
		},
	]}
/>

Related components

• Indicator dot – Indicator dots are small, decorative, badge-like indicators used to call attention to an item, such as an unread message.
• Notification badge – Notification badges are visual indicators for numeric values.
• Status badge – Status badges are visual indicators used to highlight an item’s status for quick recognition.