HPE
Design System
Foundation
Components
Templates
Learn
Jump to section
Guidance
Anatomy
Remove button
Background color
Name-value pair tags
Creating name-value pair tags
Assigning tags
Assigning value-only tags
Assigning name-value tags
Filtering with tags
Filtering with tags on a detail page
Filtering with tags on a summary page
Components

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:

1
NY_USA
2
Diagram illustrating the primary elements of a tag.
  1. Border
  2. Value

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

1
3
Location
:
NY_USA
4
2
Diagram illustrating the primary and additional elements of a tag.
  1. Border
  2. Value
  3. Name
  4. Remove button

Character requirements:

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

Remove button

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.

Background color

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

Name-value pair tags

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.

Creating name-value pair tags

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.

Assigning tags

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.

Assigning value-only tags

Create and Assign Tags

Tags are values that can be assigned to resources.

Tags will be assigned to 1 selected device.
Assigned tags
No tags have been assigned.

Assigning name-value tags

Create and Assign Tags

Tags are name-value pairs that can be assigned to resources.

Tags will be assigned to 1 selected device.
Assigned tags
No tags have been assigned.

Filtering with tags

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

Filtering with tags on a detail page

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.

Devices

Store C-3P0

Aruba 530 32930F

Details

Name
Store C-3PO
Model
Aruba 530 32930F
Type
Gateway

Tags

Filtering with tags on a summary page

Example coming soon.

Related

Related content you may find useful when using Tag.

Created On
13/02/2021 at 14:23:32
Description
Privilege escalation, via set-user-ID or set-group-ID file mode, should not be allowed.

NameValueList

A NameValueList displays a group of NameValuePairs.
HPE Lists Preview

Lists

Go-to patterns for displaying many services, devices, users, and more.

Still have questions?

Something missing or looking for more information? Get in touch to help make the HPE Design System better.

Edit this page