Tag
A tag is a label an agent added to a request. It carries no status and no colour meaning, and it can be removed.
Read-only and removable
Billing
Show code
<KbTag>Billing</KbTag>BillingExport
Show code
<KbTag removeLabel="Remove tag Billing" onRemove={remove}>Billing</KbTag>When to use
- Use tags for labels people create to sort and find requests: Billing, Export, VIP.
- Keep each tag to one or two words in sentence case.
- Never use a tag for a status. Statuses are lozenges.
- Tags don't change colour; their wording is the only signal.
BillingOpen
Resolved
Import
import { KbTag } from "@/components/ui/KbBadge";
<KbTag removeLabel="Remove tag Billing" onRemove={remove}>Billing</KbTag>Props
| Prop | Type | Default | What it does |
|---|---|---|---|
children | ReactNode | None | The label. |
removeLabel | string | None | The remove control's name, with the tag in it. Required with onRemove. |
onRemove | () => void | None | Shows a remove cross. |
disabled | boolean | None | Disables the remove cross. |
Keyboard and screen readers
- A read-only tag is plain text. The remove cross is a real button with its own name, such as Remove tag Billing.
- The cross glyph is hidden from screen readers; the label names the action.
- The remove button has the shared focus ring.