Badge
A badge is a count, and nothing else. It hides at zero, and turns red only when a person must act now.
Plate, alarm and quiet
Queue 24 Handed off 3 requests need a person Total 128 Empty 0
Show code
<KbBadge value={24} />
<KbBadge value={3} alarm label="3 requests need a person" />
<KbBadge value={128} quiet />
<KbBadge value={0} showZero />When to use
- Use a badge for a number of things: queue counts, unread, a tab count.
- Use alarm only when someone has to act now. A quiet total never alarms.
- Give a spoken label when the number alone is unclear: 3 requests need a person.
- An unknown count shows an en dash, never a made-up number.
Queue 24
24 open
Import
import { KbBadge } from "@/components/ui/KbBadge";
<KbBadge value={24} />Props
| Prop | Type | Default | What it does |
|---|---|---|---|
value | number | null | undefined | None | The count. Null or undefined shows an en dash. |
alarm | boolean | false | Red plate, only when a person must act now. |
quiet | boolean | false | No plate: a passive total beside a label. |
showZero | boolean | false | Show 0 instead of hiding. |
label | string | None | Spoken in place of the number. |
Keyboard and screen readers
- The number is plain text, tabular so it doesn't jitter as it updates.
- With a label, the number is hidden from assistive tech and the label is read instead.
- Red is backed by the number and the surrounding words; it is never the only signal.