Tags are simple attributes containing metadata. Tags:

• Are simple, brief and concise metadata describing a resource or content.
• Organize and group resources by common characteristics or attributes.
• May be included as an attribute in search, filter, or details of a resource.
• Assist batch actions and selection of multiple resources.

The most basic tags consist of two primary elements:

1. Border
2. Value

Tags can have additional elements depending on the tags’ intended use and context:

1. Border
2. Value
3. Name
4. Remove button

Character requirements:

• Name: up to 128 characters
• Value: up to 256 characters

Applying the remove button (see element #4 in the anatomy figure) is dependent upon the use case and not a requirement.

The remove tag button may be used when:

1. Removing a tag in an editor.
2. Removing a tag as filtering criteria.
3. Clearing or removing a tag from a resource

The remove tag button should not be used when:

1. Displaying tags for a resource in a detail view. Use a NameValueList instead.
2. Displaying tags where removal of the tag is not within an edit experience for the resource.

To implement a Tag with a remove button, provide a function to the onRemove Tag property.

Tags do not receive a background color. Instead, tags inherit the background of their container.

Name-value pairing with tags allow further organization and identification of resources. While this feature is not a requirement, name-value pairs can help users more clearly group resources.

• In some hybrid use cases, it can be valid to have a mixture of tags with name-value and others with just value.

The experience for creating a Name-Value pair tag occurs in 2 steps: Create the name and then create the value. Alternatively, select an existing name and create a new value.

Currently, assigning tags occurs within an editor experience in a modal or wizard. This helps to focus the task for the user. Tags are first selected and/or created, then assigned to the resource.

Filtering with tags allows the user to search, select, and remove tags from a set of filter criteria in order to find relevant data.

One example in which a tag can be used to facilitate quick associations amongst resources is to use the tag as a clickable filter from the detail of resource.

Example coming soon.