:X Ticket Tags — Wireframes

🏷️ Ticket Tags — Wireframes

All UI touchpoints where the tags feature appears

1. Ticket Grid — Tag Pills Next to Title
Small colored pills appear after the ticket title. Max 3 visible, "+N" for overflow. Private tags show a 🔒 icon.
🔍 Search tickets...
Recently updated ▾
⚙ Filters
☰ Columns
📁 New Folder
+ Create
TitleStatusPriorityAssigneeCreatorUpdatedScore
create user/password authentication
New
sprint 1 urgent
Define
● Low
Dan
Idan
1h
91
create a welcome screen
sprint 1 frontend design +1
Ready
● High
Idan
Idan
1h
93
fix login timeout on slow connections
🔒 my review
Executing
● Medium
Dan
Dan
3h
78
add stripe payment integration
Define
● Low
Idan
1h
93
Tag pills appear inline with the title. Private tags (like "my review") display a 🔒 lock icon. Overflow shows "+N".
2. Three-Dot Menu — "Tags..." Submenu
New "Tags..." item between "Assign" and "Move to..." opens the TagPicker as a submenu.
sprint 1
urgent
frontend
design
🔒 my review
TagPicker shows all visible tags with checkboxes. Checked = applied to this ticket. Private tags show 🔒 lock.
3. TagPicker — Inline Tag Creation
When typing a name that doesn't exist, "Create..." appears. Clicking reveals color swatches + scope toggle.

Step 1: Type a new tag name

No matching tags
+ Create "sprint 2"

Step 2: Pick color & scope, then confirm

Choose color:
🌐 Team
|
🔒 Private
8 preset color swatches. Scope toggle: Globe (team) / Lock (private). After creation, tag is auto-applied to the ticket.
4. Filter Popover — Tags Section
New "Tags" section in the existing filter popover. Multi-select with AND logic.
Priority
● High ● Medium ● Low
Type
💡 Feature 🐛 Bug 📋 Task
New
Tags
sprint 1 urgent frontend design 🔒 my review backend
Clear tags

When "sprint 1" is selected:

✅ Shows tickets tagged with "sprint 1"
❌ Hides tickets without "sprint 1" tag

AND logic: selecting both "sprint 1" + "urgent" shows only tickets that have both tags.

Filter icon in toolbar turns active:

⚙ Filters 1
Tags appear as colored pills. Active = highlighted with border. "Clear tags" resets. Filter icon shows badge count.
5. Ticket Detail — OverviewCard
Tag pills and "+ Add tag" button in the ticket detail overview card.
Assignee
👤 Idan Ayalon
Created by
Idan Ayalon
New
Tags
sprint 1 urgent frontend
+ Add tag
Status
Ready
Tags displayed as pills in the overview card. "+ Add tag" button opens the same TagPicker popover used in the grid.
6. Preset Color Palette
8 preset colors available for tags. Stored as key strings in the database.
red
orange
yellow
green
teal
blue
purple
pink