Tag glyph and tag group
Kit v4 (Frank, 2026-10-19: three tags were mis-centred and the third was clipped by the column). TagGlyph is one fixed square (20px compact · 22px comfortable), one radius, the glyph centred on both axes (icons are 12px SVG on a 24 grid; the letter is 11px / 700 with the box line-height equal to its inner height), one tint rule for every tag (11% fill + 26% hairline of the tag colour), a title and aria-label that carry the meaning. TagGroup is left-aligned, always in the order ⚡ · R · +, a 4px gap, vertically centred on the row, and its column is sized for the maximum real count (3): --tag-slot = 3 boxes + 2 gaps (68 / 74px), --tag-col = slot + 2 × 10px cell padding (88 / 94px). Nothing clips at either density or at 1280.
Covers: no inventory id: a new atom beside badge and status-chip. Exports: TagGlyph, TagGroup.
Anatomy
The three tags with their anatomy, and the full set of real combinations in a table row: 1, 2 and 3 tags, none.
States
6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
TagGlyph·@rj/admin-kit- Props
kindexpress | returning | plusSize ·label(tooltip + accessible name) ·size(from--tag-size)- Variants
- x ⚡ · r R · p +
- States
- default · hover (native title + group tooltip) · keyboard-focus (on the group)
- shadcn / Radix
- Tooltip (group-level, lists every tag)
- Package underneath
- lucide-react zap + plus (stroke 2.4) · the letter in Archivo 700
- Accessibility
- each chip role=img with aria-label = its meaning; glyph is aria-hidden
- API operations
- admin.orders.index rows: is_express · is_returning_order (+ return_reason) · plus_size_recheck_flag (+ plus_size_recheck_note)
- Phone variant
- same chips, 22px, beside the order number
- Export
TagGroup·@rj/admin-kit- Props
tags(kinds present) ·density- Variants
- in a column (
--tag-col) · beside an id - States
- 0 · 1 · 2 · 3 tags
- Package underneath
- CSS only:
--tag-size20 / 22 ·--tag-gap4 ·--tag-radius5 ·--tag-slot·--tag-col - Accessibility
- role=group aria-label='Order flags', focusable; the tooltip opens on hover and focus and lists every tag with its meaning
- Permission
- none: flags are read-only data on the order