Tag components are used to categorize or label content within a user interface. They are commonly employed to organize information, highlight key attributes, serve as visual indicators that help users quickly identify categories associated with the content.
The status tag component is a label used to display the current status of an item, such as "Active," "Pending," or "Completed." It visually distinguishes states with varying colors and styles, helping users quickly identify key information at a glance.
The spacing between horizontally stacked tags should be set to 8px to ensure that they remain separate and do not overlap.
horizontal-stack
The Info Tag is a lightweight label used to display supplementary, contextual information such as timestamps (e.g., "2 hours ago"), article categories, statuses, or metadata on cards and content blocks. Its purpose is to provide quick insights without overwhelming the primary content.