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×

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