💠 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

Red

Orange

Amber

Yellow

Lime

Green

Emerald

Teal

Cyan

Sky

Blue

Indigo

Violet

Purple

Fuchsia

Pink

Rose

Useful links

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