Tag
Tags are metadata attributes facilitating the identification, organization, searching, and filtering of resources.
Guidance
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.
Anatomy
The most basic tags consist of two primary elements:
- Border
- Value
Tags can have additional elements depending on the tags’ intended use and context:
- Border
- Value
- Name
- 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:
- 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.
Background color
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.
Create and Assign Tags
Tags are values that can be assigned to resources.
Create and Assign Tags
Tags are name-value pairs that can be assigned to resources.
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.
Still have questions?
Something missing or looking for more information? Get in touch to help make the HPE Design System better.