Status
Tag
A gray label for categories and keywords.
Preview
Props
| Prop | Type | Description |
|---|---|---|
icon | IconName | |
selected | boolean | |
onClick | () => void | |
className | string | |
children | React.ReactNode |
Guidelines
A gray label for categories and keywords. Selectable tags toggle to neutral dark.
Provide: children, optional icon, and selected with onClick for a filter. Wrap in TagGroup with a label. For a pick-any-of set, give TagGroup items ({ key, label, icon }) with defaultSelected or selected and onChange(keys), and it handles the toggling, with a check on each chosen tag. Set selectionMode: 'single' to pick one (a brand, a contract kind); add required when one must stay chosen. Use size: 'M' on desktop forms and 'L' on phones so tags are easy to tap; keep S for filters. Children after items sit at the end of the row, for an "Add" action.
- Use tags for many-of-many categories (a brand's industries, a project's content type: Long form, Short form). For one-of-few view switches, use SegmentedControl.