Tag
A tag (sometimes called a chips, label or badge in certain libraries) is a visual element used to identify, categorize, or highlight content. It typically appears as a small, colored block containing brief text. A tag can also include an icon or a close button.
Usage
Categorization: Tags enable quick classification of content according to defined criteria or statuses. They should be used consistently with your product or service’s taxonomy or status definitions.
Quick communication: Because of their color-coded and compact format, tags allow users to spot key information at a glance.
Filtering and search: In some interfaces, tags are interactive, allowing the user to filter or refine results by selecting a tag.
Use cases
Indicating a status (e.g., “Draft,” “Published,” “Archived”)
Highlighting a category or topic (e.g., “Back-end,” “SEO,” “Marketing”)
Emphasizing a notable feature (e.g., “New,” “On Sale”)
Not to be confused with
Badge: A badge is typically a small shape (often circular or squared) containing a number or very short text, often used to show counts or notifications (e.g., unread message count). In contrast, a tag is intended for categorizing and can carry more descriptive text.
Button: A button’s primary purpose is to trigger an action (like submitting a form or opening a modal). While a tag can be clickable, its main purpose is to display information in a compact format rather than initiate an action.
Best practices
Concise Text
Keep tag text short (ideally one to two words). Overly long text breaks the compact form factor.
Visual Consistency
Standardize color, shape, and typography for all tags across the interface.
Use specific colors or styles for particular statuses or categories (e.g., red for “Error,” green for “Approved”).
Readability & Contrast
Ensure sufficient contrast between the tag’s background and its text, adhering to accessibility guidelines.
Make tags easily distinguishable from one another if color-coding is used.
Optional Dismiss Button
Allow users to remove tags if the context calls for it (e.g., user-applied filters).
Provide a clear, accessible label for screen readers (e.g., “Remove tag [name]”).
Use Iconography Sparingly
Icons can add clarity (e.g., status icons), but avoid cluttering the limited space.
If using icons, maintain consistent sizing and alignment.
Avoid Over-Tagging
Too many tags can overwhelm users and reduce effectiveness.
Only tag content with the most relevant or essential labels.
Interactive States
If tags are clickable (for filtering or navigation), provide hover/focus states and ensure keyboard accessibility.
Make interactive tags visually distinct from non-interactive ones.
Keep tag text succinct—typically a single word or short phrase for readability.
Summary
A tag is a small, visually distinct label that categorizes or highlights a piece of content. By keeping text succinct, ensuring good contrast, and applying consistent visual styles, tags provide a quick way for users to identify and filter information. Whether representing status, category, or attributes, well-implemented tags help maintain an organized, scannable interface that boosts usability and clarity.
