Components · Data display & feedback
Lozenge
A tiny, uppercase status pill for the lifecycle of a thing — In progress, Done, Blocked. Smaller and quieter than a badge, it reads as metadata: a dab of tinted colour with bold, spaced caps. Non-interactive by design.
Preview
Default
In progress
Done
At risk
Blocked
Info
New
Build with the skill
No package to install — hand this to your AI to generate or migrate the component in your stack.
Apply the Zetta "Lozenge" component to this project using the zetta-design-md skill.
WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `lozenge` spec (variants: default, primary, success, warning, danger, info, discovery) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `lozenge` spec in this project's stack.
AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.
ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.Anatomy & rules
╭──────────────╮
│ IN PROGRESS │ ← lozenge-primary
╰──────────────╯
Lozenge is non-interactive and read-only.
| State | Visual |
|---|---|
| Default | Semantic fill + border + text (see variants in frontmatter) |
| Disabled | 50% opacity — use sparingly |
When to use
- Workflow states: "In Progress", "Done", "Blocked", "In Review".
- Lifecycle labels: "Draft", "Published", "Archived".
When not to use
- Numeric values (counts, quantities) — use Badge.
- User-defined labels or tags — use Tag.
- More than one lozenge per item — rethink the information hierarchy.
Do
- Keep labels to 1–3 words maximum.
- Use ALL CAPS or title case consistently across the product.
- Choose appearance based on semantic meaning, not visual preference.
Don't
- Don't make lozenges interactive — they are read-only status indicators.
- Don't use
lozenge-dangerfor warnings — uselozenge-warning.
- 1–3 words. "In Progress", not "Currently being worked on".
- Title case preferred: "In Review", "To Do", "Done".
Keyboard
Lozenge is non-interactive and read-only — it has no keyboard behavior.
Accessibility
- Color is not the sole differentiator — the text label carries the meaning.
- All lozenge color pairs meet 4.5:1 contrast (bg/text combinations use semantic token pairs).
- Do not use
aria-labelto override visible text — the text is already the label.
Spec
Values and token references resolved straight from the Zetta spec.
lozenge
- fontFamily
- Geist
- fontSize
- 11px
- fontWeight
- 500
- lineHeight
- 1
- borderRadius
- {rounded.base}
- paddingX
- {spacing.sm}
- paddingY
- {spacing.xs}
- display
- inline-flex
- alignItems
- center
- textTransform
- uppercase
- letterSpacing
- 0.04em
- borderWidth
- 1px
- borderStyle
- solid
lozenge-default
- backgroundColor
- {colors.surface-muted}
- textColor
- {colors.muted}
- borderColor
- {colors.border-strong}
lozenge-success
- backgroundColor
- {colors.success-bg}
- textColor
- {colors.success-text}
- borderColor
- {colors.success}
lozenge-warning
- backgroundColor
- {colors.warning-bg}
- textColor
- {colors.warning-text}
- borderColor
- {colors.warning}
lozenge-danger
- backgroundColor
- {colors.danger-bg}
- textColor
- {colors.danger-text}
- borderColor
- {colors.danger}
lozenge-info
- backgroundColor
- {colors.info-bg}
- textColor
- {colors.info-text}
- borderColor
- {colors.info}
lozenge-primary
- backgroundColor
- {colors.primary-bg}
- textColor
- {colors.primary}
- borderColor
- {colors.primary}
lozenge-discovery
- backgroundColor
- {colors.ai-bg}
- textColor
- {colors.ai}
- borderColor
- {colors.ai}