Tag glyph and tag group F1 variant 37 · tag-glyph
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.
Whole page: Compact Comfortable Laravel · navy DTC · midnight green
Anatomy The three tags with their anatomy, and the full set of real combinations in a table row: 1, 2 and 3 tags, none.
Order # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
--tag-size × 3 + --tag-gap × 2 = --tag-slot (68px compact · 74px comfortable) States 6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
one tag Order # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1
two tags Order # Tags Customer n 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2
three tags (max) Order # Tags Customer n 4514 R H. Pemberton 3
no tags Order # Tags Customer n 4511 R. Lindqvist —
hover · tooltip lists every tag Order # Tags Customer n 4523 R M. Brennan 2 4514 R R Returning order · Seasonal order
Plus Size re-check · Seat over the Plus Size start for this block H. Pemberton 3
keyboard focus on the group Order # Tags Customer n 4523 R M. Brennan 2 4514 R H. Pemberton 3
Density Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.
compact · default · data-density=compactOrder # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
comfortable · data-density=comfortableOrder # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
en Order # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
中文 · lang=zh-Hans订单号 标记 客户 n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
long string Order # Tags Customer n 4514 R A. Fitzwilliam-Hart-Montgomery-Abernethy 3 4523 R M. Brennan 2 4511 R. Lindqvist —
permission denied Order # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
Both apps One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.
Laravel admin · :rootOrder # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
DTC admin · data-theme=dtcOrder # Tags Customer n 4528 J. Okafor 1 4525 R A. Fitzwilliam-Hart 1 4519 L. Moreau 1 4523 R M. Brennan 2 4509 S. Nakamura 2 4493 R D. Haugen 2 4514 R H. Pemberton 3 4511 R. Lindqvist —
Export TagGlyph · @rj/admin-kitProps kind express | 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-kitProps tags (kinds present) · densityVariants in a column (--tag-col) · beside an id States 0 · 1 · 2 · 3 tags Package underneath CSS only: --tag-size 20 / 22 · --tag-gap 4 · --tag-radius 5 · --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