skip to content

Tag

Tags provide a way to categorise content, such as by subject or keyword. They link to more information and content in that category.

Demo

<div class="u-mb-24 eds-l-cluster" style="--eds-l-cluster--gap: .5rem">
	{{#each .}}
		{{> eds-c-tag}}
	{{/each}}
</div>

When to use this component

Use the Tag component:

  • to represent categories or topics that users can navigate to
  • to display subjects or keywords associated with content

When not to use this component

Do not use the Tag component:

  • as a replacement for primary navigation or buttons
  • to indicate a status or an update (use Badges instead)
  • in dense layouts where multiple tags may create cognitive overload
  • to apply, view or remove filters (use Chips instead)

Tag sizes

Size Description
Default Uses smaller typography and reduced padding to work in spaces with lots of information.
Large For use when additional prominence or readability is required. 
<div class="eds-l-stack" style="--eds-l-stack--gap: 1rem;">
	{{#each .}}
		<div>
			{{> eds-c-tag}}
		</div>
	{{/each}}
</div>

Content rules

Text within a tag must:

  • use short, scannable labels (1 to 3 words is best)
  • use sentence case
  • avoid punctuation unless absolutely necessary
  • make labels meaningful without additional context
  • maintain consistency across similar tags
  • not truncate critical information

Layout and positioning

Place tags in the context of a parent element. For example, a group of tags collected under a heading or a small number of tags within a card.

Group related tags logically (for example metdata, subject clusters).

How it works

Installation

To install the components, go to the get started guide for developers.

To use the Tag component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

Import the styles of the Tag component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-tag';

Configuration

To view all the properties of this component, go to the schema.

Name Type Description Required
text String Text for the tag. ✅
href String Link for the tag. ✅
large Boolean Enables large tag size.
dataAttributes String Use to define any data attributes that you need in the tag link.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.