New Component Request - Tag/Chip

Reference Links

Kumo Chat Thread 

Resource Tagging Documentation (Figma)

To view current implementation...

1. Login to Staging
2. Amend URL with  '?devPanel=True'
3. Turn resource-tagging-ui-experiments gate ON
4. Navigate to 'Burritobot' Account
5. Navigate to Manage Account < Resource Tags  

**NOTE Tags should be visible in the Account table

1. Component Overview

The Tag component is a flexible UI element that can represent metadata, resource types, or status. It supports various configurations, including icons, dismissal actions, and a "Dual Split" mode for displaying counts or keys alongside values.

Anatomy

• Container: Rounded rectangular base with subtle borders.

• Icon (Optional): Leading icon to signify resource type or category.

• Key (Optional): A prefix label (e.g., "KEY:").

• Label: The primary text content.

• Dismiss Icon (Optional): A trailing 'X' for removable tags.

2. Interaction States

The tag must respond visually to user input to maintain accessibility and clarity.

3. Configurable Variables

To ensure versatility across different use cases, the component includes the following boolean toggles:

• Show Icon: Displays a leading icon relative to the resource (e.g., Folder, Database).

• Show Key: Displays a metadata key before the label.

• Dismissable: Adds a trailing "close" button to remove the tag from a set.

• Dual Split: Dividers the tag into two segments (typically for Label + Count or Key + Value).

4. Extended Behaviors

Beyond simple labeling, the tag supports advanced interaction patterns:

Tooltip Behavior

When a tag's content is truncated or requires technical context, a tooltip should appear on hover displaying the full {string} value or metadata key.

Secondary Menu (Contextual)

For complex management, a tag can trigger a dropdown menu on click or right-click containing:

• Primary Action: Go to tag overview.

• Filter Action: Filter by tag.

• Destructive Action: Remove tag (highlighted in red).

5. Visual Variations

The system supports multiple content types to suit different data structures:

• Resource Type: Prepends an icon (e.g., Personal Website, devportal).

• Dismissable: Enables user-driven removal.

• Dual Split: Ideal for system-level tags (e.g., production | 999).

6. Technical Implementation Note

For the Dual Split variation, ensure the divider maintains a consistent vertical height and that both segments have independent padding to ensure the text remains legible even with high character counts.

Would you like me to generate the React/CSS code for this component or create a Figma-ready documentation table for these properties?