Tag

You might say

Label each article as a tutorial or news item so people can tell them apart at a glance.

Mark a status, category, or selected condition with short textTags help people recognize status, category, and active filters at a glance. Color can support scanning, but the words still need to carry the meaning. A normal tag displays information; a removable tag may clear a filter or selection.

In progressCompletedOverdueFront-end×

You can say this to an AI Agent

Standardize order tags: status tags only display the current state and are not clickable; active filter tags can be removed individually and must retain text rather than relying on color. Verify that removing a filter never changes an order's status.

When to use it

Show a category
Website redesignIn progress
Annual report designCompleted
Mark a workflow status
FrontendReactPerformance
Display an active filter
Filter: Frontend × Past week ×
Label a small piece of metadata
TasksStatus
Sign-in pageIn progress
Payment flowCompleted

When NOT to use it

Put a sentence inside a tag
Export dataButtons perform actions; tags only label.
Rely on color without a readable label
This is an example of an unusually long tag label
Use many decorative tags that add no information
UrgentVIPNewPopularLimitedRecommendedOfficialExclusive
Make a display-only tag look removable
⚠ Your account may be at risk. Change your password now.

Anatomy

Front-end×

The tag body: small, colorful, and used only for labeling

Use short text to describe the status or classification

Optional, for removable filters

Variants

Colored

BlueGreenRedGray

When color helps distinguish status or category

Closable

Last week×Front-end×

When users can remove selected filters directly

With Dot

In progressCompleted

When text states the status and dots only support recognition.

Typical use cases

Article category

Homepage redesignIn progress

Review payment flowCompleted

First draft of annual reportOverdue

Order status

How to plan website content with AI

A complete guide from defining requirements through deployment, written for beginners.

Front-endAI programmingTutorial 3.2k reads

Filter chip

Selected filters: Past week× Front-end× Completed×

24 matching tasks

Skill label

ProjectOwnerStatus

Website refreshAlex ChenIn progress

Annual report designMaya LeeCompleted

Payment flow rebuildKKOverdue

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

An order list shows statuses such as Paid, while the filter area shows active choices Beijing and This month. How should tags work?

A. Replace every status and filter with colored dots and only show the matching countB. Keep status tags informational and give selected filter tags an explicit remove actionC. Make every status and filter tag a button that changes order status when clicked