TagDraft

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

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>
</nord-stack>

<nord-stack gap="s" direction="horizontal" wrap>
  <nord-tag variant="removable" disabled>May bite</nord-tag>
  <nord-tag variant="selectable" disabled>Has seizures</nord-tag>
  <nord-tag variant="selectable" disabled checked>Service dog</nord-tag>
</nord-stack>

<nord-stack gap="s" direction="horizontal" wrap>
  <nord-tag variant="removable">May bite</nord-tag>
  <nord-tag variant="removable">Has seizures</nord-tag>
  <nord-tag variant="removable">Service dog</nord-tag>
</nord-stack>

<script>
  const stack = document.querySelector("nord-stack")

  stack.addEventListener("remove", event => {
    event.target.remove()
  })
</script>

<nord-stack gap="s" direction="horizontal" wrap>
  <nord-tag variant="selectable">May bite</nord-tag>
  <nord-tag variant="selectable">Has seizures</nord-tag>
  <nord-tag variant="selectable" checked>Service dog</nord-tag>
</nord-stack>

<form action="#">
  <nord-stack>
    <nord-fieldset label="Tags">
      <nord-stack gap="s" direction="horizontal" wrap>
        <nord-tag name="may-bite" variant="selectable" value="selected">May bite</nord-tag>
        <nord-tag name="has-seizures" variant="selectable">Has seizures</nord-tag>
        <nord-tag name="service-dog" variant="selectable" checked>Service dog</nord-tag>
      </nord-stack>
    </nord-fieldset>

    <nord-button variant="primary" type="submit">Submit</nord-button>
  </nord-stack>
</form>

<nord-stack gap="s" direction="horizontal" wrap>
  <nord-tag variant="selectable" size="s" checked>Service dog</nord-tag>
  <nord-tag variant="removable" size="s">Has seizures</nord-tag>
  <nord-tag size="s">Service dog</nord-tag>
</nord-stack>

Properties

Property	Attribute	Description	Type	Default
`variant`	`variant`	The behavioral variant of the tag.	`"default" \| "removable" \| "selectable"`	`"default"`
`checked`	`checked`	Controls whether the tag is checked or not (only relevant when variant is set to `selectable`).	`boolean`	`false`
`size`	`size`	The size of the tag. This affects the font-size.	`"s" \| "m"`	`"m"`
`disabled`	`disabled`	Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the form component.	`string \| undefined`	`undefined`
`value`	`value`	The value of the form component.	`string`	`""`
`form`	`form`	Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.	`HTMLFormElement \| null`	`undefined`

Events

Event	Description	Type
`change`	Fired whenever the input's value is changed via user interaction.	`NordEvent`
`remove`	Fired when the remove button is activated. This event should be used to remove the tag from the DOM.	`NordEvent`

Slots

Slot name	Description
Default slot	The tag content.

Methods

Method name	Parameters	Description
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically simulates a click on the component.

Localization

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

Key	Description
`removeLabel`	Accessible label for the remove button.

For full localization guidelines, please see Localization documentation.

Localization Guidelines

Dependencies

This component is internally dependent on the following components:

Icon
Icons are used to provide additional meaning or in places where text label doesn’t fit. Icon component allows you to display an icon from the Nordicons library.

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.

Name	Purpose
`default`	The default variant for a non-interactive tag.
`removable`	Used for tags that can be removed by the user.
`selectable`	Used for tags that can be selected or deselected.

Integration

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

Troubleshooting

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.