v0.3.0 New Pending Failed
Done
×
怎么向 AI 描述它 复制 Prompt
基础 修改 进阶
Create a badge component.
STYLE
- pill shape, 12px monospace text
- five tinted variants: purple, blue, green, orange, red
- each variant: 10% tinted background with solid matching text
- one badge carries a solid 6px status dot
STATES
- default, removable with a close icon
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui
Make the existing badges removable.
Use:
- a small close icon on the right of the text
- clicking it removes the badge with a 150ms fade
- keep colors, radius and text unchanged
Only add the removable behavior.
Create a badge component, replacing the existing one.
Requirements:
- pill shape, 12px monospace text, 10% tinted background per variant
- five variants: purple, blue, green, orange, red
- status dot: 6px solid circle inside the badge
- removable: close icon, fade-out on click
- small and medium sizes, 2px size difference
Keep the surrounding table layout unchanged.
MOTION
- Count change: 200ms cross-fade on the number only, not the container.
- No enter bounce, no spring, no scale-in.
- Dot variant: no animation at all.
- prefers-reduced-motion: instant number swap.
修改类 Prompt 只动目标，不碰页面其余部分。
徽章是什么？ 徽章是短状态。点名变体、着色配方，以及带圆点还是关闭图标。
变体 点击属性即可在预览中高亮。
状态 在 Prompt 里写明这个类型。
标签 字段的名称文字，简短并置于输入框上方。
变体 给具体值，不要只给感觉词。
圆点 给具体值，不要只给感觉词。
可移除 给具体值，不要只给感觉词。 状态 点击属性即可在预览中高亮。
默认 输入或报错前字段的默认有效状态。
可移除 在 Prompt 里写明这个状态。 结构解剖 这些是 Prompt 里应该点名的部件。
01 容器 02 圆点 03 文本 04 关闭图标 什么时候用 表格的状态列：进行中、待处理、失败 列表项的元信息：版本、标签、数量 用户可以移除的筛选片 什么时候别用 超过两个词的长标签——改用普通文本 作为触发操作的唯一入口——改用按钮 一行排超过五个 复制 Prompt Create a badge component.
STYLE
- pill shape, 12px monospace text
- five tinted variants: purple, blue, green, orange, red
- each variant: 10% tinted background with solid matching text
- one badge carries a solid 6px status dot
STATES
- default, removable with a close icon
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui