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:
Tags can have additional elements depending on the tags’ intended use and context:
- Remove button
- 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:
- Removing a tag in an editor.
- Removing a tag as filtering criteria.
- Clearing or removing a tag from a resource
The remove tag button should not be used when:
- Displaying tags for a resource in a detail view. Use a NameValueList instead.
- 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.
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.
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.
Something missing or looking for more information? Get in touch to help make the HPE Design System better.