Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

New Component Request - Tag/Chip

Open
  • Is something wrong?
#331 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Quiet
Tech stack
typescript
Domain
design, frontend

Research direction

Start by reviewing the Tag component specification in the issue and the linked Resource Tagging Figma design. To inspect the current implementation, use staging with ?devPanel=True, enable the resource-tagging-ui-experiments gate, and open Burritobot > Manage Account > Resource Tags. Done should cover the documented anatomy, interaction states, configuration options, and extended behaviors, with tags visible in the Account table.

Written by the indexing model from the issue text.

Description

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.

State | Visual Feedback -- | -- Default | Standard background and border. Hover | Slight darkening or drop shadow to indicate interactivity. onClick | Deepening of the background color/border to signal a click event. Focused | High-contrast blue outline for keyboard navigation accessibility. Disabled | Reduced opacity (approx. 50%) and "not-allowed" cursor.

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?


Reference Links [Kumo Chat Thread ](https://chat.google.com/room/AAQAys6oE8c/IvmrGdU5cJQ/IvmrGdU5cJQ?cls=10)
Dominant language
TypeScript
Stars
4k
Forks
184
Avg merge
20h 50m
Merged PRs (30d)
42

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from cloudflare/kumo

All issues in cloudflare/kumo

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.