The Tag: Organizing and Categorizing Content
The Tag component represent metadata, labels, or categories within your user interface, enabling users to filter, sort, or group items based on these visual indicators.
Features
Discover the key features of the Tag component.
Visual Labeling
Tag visually labels or categorizes content, aiding in organization. It serves as a succinct descriptor that quickly communicates the nature or context of the associated item, facilitating efficient content organization and retrieval.
Content Classification
Classifies items into groups or categories for easy identification. By assigning tags to items based on their attributes or characteristics, users can classify and organize content according to relevant criteria, enabling intuitive navigation and content management.
Customizable Design
Tailor tag styles to match interface seamlessly, allowing you to customize aspects such as color, size, shape, and typography to align with your brand's visual identity and design language. With customizable options, you can create tags that integrate seamlessly with your interface while effectively conveying information and enhancing overall visual coherence.
Anatomy
Base
The primary container for the Tag component.
Placeholder Text
Central descriptive text for the tag.
Icons
Icons that can be placed to the left or right of the placeholder text based on the variant.
Status
A small visual indicator, often round, representing status or a specific condition.
Avatar
A small representation of a user's profile picture or a generic user icon.
Digit
Numerical representation, often used to show quantity or new items.
Example Use Cases
Content Organization
Tagging items, such as articles, posts, or products, with relevant keywords, topics, or attributes to facilitate content discovery, navigation, and filtering for users.
Filtering and Sorting
Enabling users to filter and sort content based on specific criteria, such as product features, categories, or attributes, by selecting or clicking on tags associated with those criteria.
Categorization and Classification
Grouping items into distinct categories, sections, or topics by assigning tags with descriptive labels or identifiers to organize content hierarchically and enhance navigational structures.
Status Indication
Communicating the status, state, or attributes of items, such as tasks, notifications, or messages, by displaying tags with color-coded labels or icons representing different states, such as "New," "In Progress," or "Completed."
User Interface Elements
Integrating tags into various UI elements, such as navigation menus, search filters, or profile settings, to provide visual cues, enhance usability, and improve user engagement with interactive components.
User-generated Content
Allowing users to tag their own content, such as photos, bookmarks, or documents, with personalized labels or keywords to organize and personalize their digital experiences.
Multi-select Controls
Implementing tags as part of multi-select controls or input fields, enabling users to choose multiple options or items from a predefined list by selecting corresponding tags.
Guidelines for Usage
When incorporating the Tag component into user interfaces, follow these guidelines for effective implementation:
Clear and Descriptive Labels: Use concise and meaningful text labels or icons for tags to accurately convey the purpose, category, or attribute they represent, ensuring clarity and ease of understanding for users.
Consistent Styling: Maintain visual consistency in the design, size, shape, and color of tags across different parts of the interface to create a cohesive and harmonious visual appearance and improve overall user experience.
Hierarchical Organization: Organize tags hierarchically or categorically to create logical groupings and improve navigational structures, enabling users to locate and access content more efficiently.
Accessibility Considerations: Ensure that tags are accessible to all users, including those with visual impairments or disabilities, by providing sufficient color contrast, keyboard navigation support, and assistive technology compatibility.
Interactive Behavior: Implement interactive behavior for tags, such as hover effects or click interactions, to provide feedback to users and enhance the usability and responsiveness of the component.
Scalability and Flexibility: Design tags to be scalable and flexible, allowing for dynamic content updates, adaptive layouts, and responsive designs to accommodate varying screen sizes and device resolutions.
Testing and Iteration: Conduct usability testing with target users to evaluate the effectiveness, clarity, and usability of tags in different contexts, iterating on the design based on user feedback and insights to optimize user experience.
Variants
Icons
Features an icon on either the left or right side of the tag, accompanied by the central placeholder text.
Status
Uses a dot or specific icon, placed usually on the left, with the placeholder text describing the status.
Avatar
Combines a user's avatar or a default user icon on the left with the user's name or role as the placeholder text.
Digit
Incorporates a number on the left, representing quantity or new items, with a descriptive placeholder text.
Sizes
.tag-small
A compact size for the component, ideal for limited space or subtle emphasis, making it less prominent but still functional and visible.
.tag-medium
The standard size for the component, providing a balance between visibility and space, suitable for most typical use cases and standard interfaces.
State
.tag :enabled
The default state where the component is fully interactive and ready for user actions. It appears normal and invites interaction.
.tag :hover
The state when a user places their cursor over the component, indicating it is ready for interaction and often visually changes to show responsiveness.
.tag :focus
The state showing that the component is currently selected or active, highlighted for user awareness and accessibility purposes, often with a border or shadow.
.tag :*disabled
The state where the component is visible but non-interactive, indicating it is not available for use. It often appears faded or greyed out to signal its inactivity.
Best Practices vs. Common Pitfalls
Do:
Do use tags to simplify complex information or statuses into easily digestible formats.
Do maintain consistency in iconography and color schemes across similar tags for clarity.
Do consider the visual hierarchy when combining multiple variants of tags in a single view.
Don't:
Don't overload a single tag with multiple types of information; it's designed for brevity and clarity.
Don't use tags solely for decorative purposes; they should always convey meaningful information.
Don't place tags in areas where they might be mistaken for actionable buttons or links.