Frontend

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×

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