Badge

• Component overview: Used to label status, categories, and attributes — covers Template Badges, Member Badges, Teams Status, Beta, and similar scenarios.
• Component group: Atomic
• Figma page: ↳ Badges

Basic Usage

Result

Loading...

Live Editor

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 badges use the tag-corner shape (bottom-left + top-right rounded) and sm size (16px).

Result

Loading...

Live Editor

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 badges use the default tag shape. The discount badge uses tag-top shape (top corners rounded). The countdown badge uses lg size (28px).

Result

Loading...

Live Editor

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>,
)

Status Variants

Result

Loading...

Live Editor

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>,
)

Variants

Result

Loading...

Live Editor

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>,
)

Shape and Size

Result

Loading...

Live Editor

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>,
)

Color Palette

Result

Loading...

Live Editor

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

Prop	Type	Default	Description
children	ReactNode	—	Badge text or content
variant	'default' | 'outline'	'default'	Visual variant (no border / 1px border)
shape	'tag' | 'tag-corner' | 'tag-top'	'tag'	Shape (all rounded / bottom-left+top-right / top only)
size	'sm' | 'default' | 'lg'	'sm'	Size (16px / 20px / 28px)
color	string	—	CSS variable token name (without -- prefix), e.g. 'Grays-Gray-2', 'AI-Victory-Purple'
className	string	—	Custom style class

Template Badge Presets

Namespace	Color	Content
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	★ (star icon)
Badge.WeeklyRanking	almond-cream	No.1 (italic)

Usage Constraints

• Badge is responsible only for the standard badge shell and does not carry any business composition logic.
• Template badge presets (Badge.xxx) provide ready-to-use configurations aligned with Figma Design System.
• When a new semantic color or shape is needed, update the spec first, then extend the component.