Tags represent a set of keywords that help label, categorize, and organize objects. Commonly used to signify the attributes of an object.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-stack gap="s" direction="horizontal" wrap>
  <nord-tag>May bite</nord-tag>
  <nord-tag>Has seizures</nord-tag>
  <nord-tag>Service dog</nord-tag>



The behavioral variant of the tag.

"default" | "removable" | "selectable""default"

Controls whether the tag is checked or not (only relevant when variant is set to selectable).


The size of the tag. This affects the font-size.

"s" | "m""m"

Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.


The name of the form component.

string | undefinedundefined

The value of the form component.


Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.

HTMLFormElement | nullundefined



Fired whenever the input's value is changed via user interaction.


Fired when the remove button is activated. This event should be used to remove the tag from the DOM.



Slot nameDescription
Default slot

The tag content.


Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.

Programmatically move focus to the component.

blur() => voidN/A

Programmatically remove focus from the component.

click() => voidN/A

Programmatically simulates a click on the component.


This component requires localization in a multi-lingual application. The following keys are required when registering a translation:


Accessible label for the remove button.

For full localization guidelines, please see Localization documentation.

Localization Guidelines


This component is internally dependent on the following components:

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use for labeling, categorizing, or organizing objects.
  • Ensure there is enough space around tags when they are interactive.
  • Always position tags so that it’s easy to understand what object they’re related to.
  • Keep in mind that tags can increase the amount of cognitive noise, particularly when combined with the status component, so use them in moderation.

Don’t #

  • Don’t use for showing the status of an object, use the badge component instead.
  • Don’t use when you want to highlight something that has been added recently, use the badge component instead.
  • Don’t use alternatives to existing tag variants.

Content guidelines #

Tags should use short and clear labels for easy scanning. They should be concise and informative:

Has seizures
This dog has seizures often

When writing tag labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

Service dog
Service Dog

Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:

Service dog
A service dog

Variants #

This section describes the different component variants, their purpose, and when to use each variant.

defaultThe default variant for a non-interactive tag.
removableUsed for tags that can be removed by the user.
selectableUsed for tags that can be selected or deselected.


For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines


If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

Send feedback

We use this feedback to improve our documentation.