Lozenge
A lozenge says the status of something in one or two words. It is read-only: you can't press it, and it never holds a count or a label someone made up.
Status categories
Statuses fall into fixed categories with fixed colours, so a person learns them once. A status can't be recoloured.
NewOpenResolvedHanded offNeeds review
Show code
<KbLozenge>New</KbLozenge>
<KbLozenge tone="sky">Open</KbLozenge>
<KbLozenge tone="teal">Resolved</KbLozenge>
<KbLozenge tone="ruby">Handed off</KbLozenge>
<KbLozenge tone="gold">Needs review</KbLozenge>| Tone | Category | Statuses |
|---|---|---|
| Ink | To do | New |
| Sky | In progress | Open, waiting on customer, waiting on engineering |
| Teal | Done | Resolved, closed |
| Ruby | Handoff or breach | Handed off, SLA breached |
| Gold | Attention | Needs review, draft |
Dot, emphasis and loud
OpenWaiting on customer
Show code
<KbLozenge tone="sky">Open</KbLozenge>
<KbLozenge tone="sky" emphasis>Waiting on customer</KbLozenge>LiveBreached, 2h over
Show code
<KbLozenge tone="teal" dot>Live</KbLozenge>
<KbLozenge tone="ruby" dot>Breached, 2h over</KbLozenge>Needs help
Show code
<KbLozenge tone="ruby" loud>Needs help</KbLozenge>Lozenge, badge, tag or chip
Four small shapes, four jobs. Pick by what the thing is, not by how it looks.
| Component | It is | Example |
|---|---|---|
| Lozenge | A status. Read-only. | Open |
| Badge | A count, and nothing else. | 24 |
| Tag | A label an agent added. No meaning. | Billing |
| Chip | A filter you press. |
When to use
- Use a lozenge for the status of a request, a rule, an environment or an SLA.
- Keep it to one or two words in sentence case. Add the detail in words when it matters: Breached, 2h over.
- Show a status once per view. If people can change it there, use the status select, which looks like the lozenge.
- Use a badge for a number, a tag for a label people create, and a chip for a filter.
Breached, 2h over
Queue 24
24 open
Import
import { KbLozenge } from "@/components/ui/KbBadge";
<KbLozenge tone="sky" emphasis>Waiting on customer</KbLozenge>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
tone | "ink" | "sky" | "teal" | "ruby" | "gold" | "ink" | The category. Ink is to do, sky in progress, teal done, ruby handoff or breach, gold attention. |
emphasis | boolean | false | Subtle emphasis inside a category, for waiting states. |
dot | boolean | false | A leading dot in the tone colour, for live states. |
loud | boolean | false | Capitals and semibold, for one flag that must be read first. |
children | ReactNode | None | The status in one or two words, sentence case. |
Keyboard and screen readers
- A lozenge renders a plain span and its words are its name. It never takes focus.
- Every tone keeps ink text on a tinted fill, so the words stay readable on paper.
- The dot is hidden from screen readers; the words carry the state.
- Loud uses capitals, which screen readers read normally. Use it once at most per view.