💠 Tag

Displays an element for categorizing or markup.

Usage

The Tag component is a small label used to categorize or mark items with key information that enables quick recognition and navigation.

Tags can encapsulate short pieces of text, such as keywords, statuses, or descriptors, and are often interactive, allowing users to add or remove them as filters.

When to use

• Categorization: Use Tags to assign categories or types to items, helping users to filter or identify content based on shared characteristics.
• Metadata: Implement Tags to display metadata, such as attributes of a product or article, which are not part of the main content but provide essential context.
• Interactivity: When Tags represent interactive elements, such as filters or selections in a search, use them to allow users to manipulate the displayed content.
• Status indication: Tags are effective for showing the status of items, like 'Completed', 'Pending', or 'New', providing a quick visual reference.

Avoid using Tags for long or complex information that would be better served by a different UI element like a Tooltip or a dedicated text field. Tags should be concise to improve legibility and usability.

Examples

Brand

Neutral

Red

Amber

Emerald

Teal

Cyan

Blue

Purple

Pink

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: