Tags
A row of labels, optionally removable, for the tags attached to a record.
Removable is all-or-nothing
There's no per-tag flag: passing onRemove makes every tag removable. If some are locked, filter them into a separate Tags row without the handler.
Remove by index rather than value when tags might repeat — filtering on the string would drop both copies.
Tags or badges?
Badge is one label with a colour and meaning — a status. Tags is a collection of user-supplied, equal-weight labels. And if the point is choosing tags rather than displaying them, that's a Combobox in multi mode.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tags | string[] | The labels. Strings only — for richer content use Badge directly. | |
| onRemove | (tag: string, index: number) => void | Its presence makes every tag removable. You get both the value and its index, so duplicates are still addressable. |
Why it works this way
Why
- Passing onRemove turns every tag removable at once, matching how the design treats the whole list.
Don't
- Don't use Tags for status. Use Badge. Don't use them as filters people toggle. Use FilterChip.