Badge
徽章组件 - 带有轻微倾斜的药丸形标签，充满手绘风格
案例展示
徽章在实际场景中的使用示例
状态标签
NEW
HOT
Featured
文章标签
Design
Frontend
TypeScript
React
通知计数
Messages
3
Notifications
12
带图标
Done
In Progress
Info
动效徽章
LIVE
SALE
LIMITED
ONLINE
变体
徽章的所有可用变体样式
Default
Secondary
Outline
Destructive
Accent
Success
Warning
Info
覆盖样式
自定义配色和样式的示例，展示徽章的覆盖能力
自定义配色
Purple
Pink
Cyan
Emerald
Amber
渐变背景
Gradient 1
Gradient 2
Gradient 3
带阴影效果
Shadow SM
Shadow LG
Accent Shadow
异形圆角
Sketch
Square
Subtle
Large
边框样式
Dashed
Accent Border
Error Border
Thick Border
尺寸变化
Small
Medium
Large
Extra Large