Component 38 · Data display
Tag
Show a compact attribute, filter, or removable value.
Overview
Show a compact attribute, filter, or removable value. It converts domain state into an understandable, traceable and accessible interface contract.
When to use
Use HE/Tag when you need to show a compact attribute, filter, or removable value. Keep its role distinct from transport freshness, animal-health severity and model confidence.
Example
RGBDepthInfrared
<div class="he-auto-cluster"><span class="he-tag">RGB</span><span class="he-tag">Depth</span><span class="he-tag">Infrared</span></div>Anatomy
1Identity
2Primary value
3State
4Evidence or action
Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.
Variants and states
Variants
States
Accessibility
Removal control has a specific label such as Remove Holstein filter.
- Maintain a visible keyboard focus indicator and a logical focus sequence.
- Never rely on colour alone for operational, freshness or severity state.
- Keep touch targets at least 44 × 44 px unless the target is an inline text link.
Cross-platform contract
| Surface | Canonical name | Status |
|---|---|---|
| Figma | HE/Tag | stable |
| Web | .he-tag | implemented |
| Flutter | HeTag | implemented |
| Token root | component.tag | generated |