UxPill
components/ux/Pill.vue
Read-only toned badge for categories and statuses — an outlined pill: full radius, 1.5 px border in the tone's 400 step, its 300 step at 20 % inside, dark mono bold text (design c92, 2026-09-24).
production
Scenarios
era: brand v1.5project: qmapsubject: componentsdeprecatedan unusually long category label that should still read as one pill
components/ux/Pill.vue
Usage
<UxPill
:tone = "grey"
:size = "md"
>
Content here
</UxPill>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | 'grape' | 'leaf' | 'grey' | 'warn' | 'grey' | Border / fill pair — grape-400 / grape-300, leaf-400 / leaf-300, grey-350 / grey-300, rose-400 / rose-300 (warn; rose because the flat brand red clobbers red-*). Text is always the content color. |
| size | 'sm' | 'md' | 'lg' | 'md' | sm: 12 px text, 1 px border, ~19 px tall — dense table cells. md: 13 px, 1.5 px border, ~23 px. lg: 15 px, 1.5 px border, ~29 px — headers. |
Slots
| Slot | Description |
|---|---|
| default | Badge text |