Badge

• 组件说明：用于标记状态、分类和属性，覆盖 Template Badges、Member Badges、Teams Status 和 Beta 等场景。
• 组件组：Atomic
• Figma 页面：↳ Badges

基础用法

结果

Loading...

实时编辑器

render(
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '40px 0', flexWrap: 'wrap' }}>
    <Badge color="Template-Community-Badge-Lavender-Mist">Badge</Badge>
    <Badge color="Template-Community-Badge-Mint-Mist" shape="tag">Published</Badge>
    <Badge variant="outline">Beta</Badge>
  </div>,
)

Template Badges

Template 类徽标使用 tag-corner 形状（仅左下、右上圆角）、sm 尺寸（16px）。

结果

Loading...

实时编辑器

render(
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '40px 0', flexWrap: 'wrap' }}>
    <Badge shape="tag-corner" color="Template-Community-Badge-Willow-Bud">Last use</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Almond-Cream">Up next</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Glacier-Blue">New</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Almond-Cream">Upgrade</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Lavender-Mist">Limited-time free</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Mint-Mist">Published</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Honey-Tea">In review</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Soft-Rose">Rejected</Badge>
    <Badge shape="tag-corner" color="Template-Community-Badge-Glacier-Blue">Private</Badge>
  </div>,
)

Member Badges

Member 类徽标使用默认 tag 形状。折扣徽标使用 tag-top 形状（仅上部圆角）。倒计时徽标使用 lg 尺寸（28px）。

结果

Loading...

实时编辑器

render(
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '40px 0', flexWrap: 'wrap' }}>
    <Badge size="default" color="Template-Community-Badge-Lavender-Mist">Limited-time free</Badge>
    <Badge size="default" color="Grays-Gray-2">Starter</Badge>
    <Badge size="default" color="AI-Gradient-20">Pro</Badge>
    <Badge size="default" color="AI-Victory-Purple">Unlimited</Badge>
    <Badge size="default" color="AI-Gradient-100">Membership</Badge>
    <Badge size="lg" color="Template-Community-Badge-Lavender-Mist" className="gap-1 pl-1 pr-2">
      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.9907 3.73975H14.481V6.06885C14.4807 7.76644 13.519 9.23767 12.1118 9.97314C13.5194 10.7085 14.4808 12.1815 14.481 13.8794V16.353H15.9907V17.353H4.08447V16.353H5.66943V13.8794C5.66957 12.1819 6.62983 10.7087 8.03662 9.97314C6.63023 9.23746 5.66965 7.76597 5.66943 6.06885V3.73975H4.08447V2.73975H15.9907V3.73975ZM10.0747 10.4741C8.19411 10.4743 6.66963 11.9988 6.66943 13.8794V16.353H13.481V13.8794C13.4808 11.9987 11.9555 10.4741 10.0747 10.4741ZM6.66943 6.06885C6.66974 7.94935 8.19418 9.47392 10.0747 9.47412C11.9554 9.47412 13.4806 7.94947 13.481 6.06885V3.73975H6.66943V6.06885Z" fill="currentColor"/></svg>
      {'1d 23:59:59'}
    </Badge>
    <Badge size="default" color="AI-Victory-Purple" shape="tag-top" className="text-(--Labels-Reverse)">26% OFF</Badge>
  </div>,
)

状态类

结果

Loading...

实时编辑器

render(
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '40px 0', flexWrap: 'wrap' }}>
    <Badge size="default" color="Status-Constuctive">Active</Badge>
    <Badge size="default" color="Grays-Gray-1">Pending</Badge>
    <Badge variant="outline">Beta</Badge>
  </div>,
)

变体

结果

Loading...

实时编辑器

render(
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '40px 0', flexWrap: 'wrap' }}>
    <Badge color="Template-Community-Badge-Lavender-Mist">Default</Badge>
    <Badge variant="outline">Outline</Badge>
  </div>,
)

形状与尺寸

结果

Loading...

实时编辑器

render(
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16, padding: '40px 0' }}>
    <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
      <Badge color="Template-Community-Badge-Mint-Mist">Tag</Badge>
      <Badge shape="tag-corner" color="Template-Community-Badge-Mint-Mist">Tag-corner</Badge>
      <Badge shape="tag-top" color="Template-Community-Badge-Mint-Mist">Tag-top</Badge>
    </div>
    <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
      <Badge size="sm" color="Template-Community-Badge-Glacier-Blue">sm (16px)</Badge>
      <Badge size="default" color="Template-Community-Badge-Glacier-Blue">default (20px)</Badge>
      <Badge size="lg" color="Template-Community-Badge-Glacier-Blue">lg (28px)</Badge>
    </div>
  </div>,
)

色板

结果

Loading...

实时编辑器

const colors = [
  { token: 'Template-Community-Badge-Willow-Bud', label: 'Willow Bud' },
  { token: 'Template-Community-Badge-Almond-Cream', label: 'Almond Cream' },
  { token: 'Template-Community-Badge-Glacier-Blue', label: 'Glacier Blue' },
  { token: 'Template-Community-Badge-Lavender-Mist', label: 'Lavender Mist' },
  { token: 'Template-Community-Badge-Mint-Mist', label: 'Mint Mist' },
  { token: 'Template-Community-Badge-Honey-Tea', label: 'Honey Tea' },
  { token: 'Template-Community-Badge-Soft-Rose', label: 'Soft Rose' },
  { token: 'Grays-Gray-2', label: 'Gray' },
  { token: 'Grays-Gray-1', label: 'Gray Light' },
  { token: 'AI-Gradient-20', label: 'Cyan' },
  { token: 'AI-Victory-Purple', label: 'Purple' },
  { token: 'AI-Gradient-100', label: 'Warm' },
  { token: 'Status-Constuctive', label: 'Constructive' },
]

render(
  <div style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '40px 0', flexWrap: 'wrap' }}>
    {colors.map(({ token, label }) => (
      <Badge key={token} color={token}>{label}</Badge>
    ))}
  </div>,
)

Badge Props

属性	类型	默认值	说明
children	ReactNode	—	徽标文本或内容
variant	'default' | 'outline'	'default'	视觉变体（无描边 / 1px 描边）
shape	'tag' | 'tag-corner' | 'tag-top'	'tag'	形状（全圆角 / 仅左下右上 / 仅上部）
size	'sm' | 'default' | 'lg'	'sm'	尺寸（16px / 20px / 28px）
color	string	—	CSS 变量 token 名（不含 -- 前缀），如 'Grays-Gray-2'、'AI-Victory-Purple'
className	string	—	自定义样式类

Template Badge 预设

命名空间	颜色	内容
Badge.LastUsed	willow-bud	Last use
Badge.UpNext	almond-cream	Up next
Badge.New	glacier-blue	New
Badge.Upgrade	almond-cream	Upgrade
Badge.LimitedTime	lavender-mist	Limited-time free
Badge.Published	mint-mist	Published
Badge.InReview	honey-tea	In review
Badge.Rejected	soft-rose	Rejected
Badge.Private	glacier-blue	Private
Badge.Favorites	almond-cream	★（星标图标）
Badge.WeeklyRanking	almond-cream	No.1（斜体）

使用约束

• Badge 只负责标准徽标壳子，不承载业务组合逻辑。
• Template Badge 预设（Badge.xxx）提供与 Figma Design System 对齐的开箱即用配置。
• 如需新增语义颜色或新形状，先补规范，再扩展组件。