Labels
Labels are short text elements that identify, describe, or categorize content, components, or inputs. They improve clarity by making elements understandable at a glance.
Philosophy
Labels exist to clarify meaning and reduce ambiguity.
They make UI elements self-explanatory.
They strengthen recognition over recall, so users don’t guess.
They ensure consistency across inputs, buttons, and navigation.
Anatomy
Variants
Text
Describes content, components, or inputs.
Text + Icon
Adds icon to further explain the label.
States
Idle
Visible, static.
Usage tips
Dos
Always make labels clear and descriptive.
Use consistent terminology across the system.
Keep labels short.
Pair icons only when they truly reinforce meaning.
Don’ts
Don’t rely on color alone to convey meaning (add text or icon).
Don’t overload with redundant labels (avoid “Name: Name”).
Don’t use vague or jargon-heavy wording.
Real-world example
