Tag
Tags represent a set of keywords that help label, categorize, and organize objects. Commonly used to signify the attributes of an object.
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' |
expand | expand | Controls whether the tag expands to fill the width of its container. | boolean | false |
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 | — |
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 | — |
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. |
| Event | Detail Type | Description |
|---|---|---|
change | NordEvent | Fired whenever the tag has been checked or unchecked via user interaction. |
remove | NordEvent | Fired when the remove button is activated. This event should be used to remove the tag from the DOM. |
This component has no CSS custom properties.
Dependencies
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:
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):
Avoid unnecessary words and articles in tag labels, such as “the”, “an” or “a”:
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 .