Components

Badge

solid/soft/surface/outline × default/sm + leading icon. Semantic colors apply to solid and soft.

View in Figma
Open
<Badge type="solid">Open</Badge>
In progress
<Badge type="soft">In progress</Badge>
Pending
<Badge type="surface">Pending</Badge>
Draft
<Badge type="outline">Draft</Badge>
Open
<Badge type="solid" size="sm">Open</Badge>
In progress
<Badge type="soft" size="sm">In progress</Badge>
Pending
<Badge type="surface" size="sm">Pending</Badge>
Draft
<Badge type="outline" size="sm">Draft</Badge>
Approved
<Badge type="soft" icon={faCheck}>Approved</Badge>
In review
<Badge type="solid" icon={faClock}>
  In review
</Badge>
Overdue
<Badge
  type="outline"
  icon={faTriangleExclamation}
>
  Overdue
</Badge>
Attention
<Badge type="surface" icon={faCircleExclamation}>
  Attention
</Badge>
Approved
<Badge type="solid" color="success">
  Approved
</Badge>
Scheduled
<Badge type="solid" color="primary">
  Scheduled
</Badge>
On hold
<Badge type="solid" color="accent">On hold</Badge>
Declined
<Badge type="solid" color="error">Declined</Badge>
Expiring
<Badge type="solid" color="warning">
  Expiring
</Badge>
Approved
<Badge type="soft" color="success">
  Approved
</Badge>
Scheduled
<Badge type="soft" color="primary">
  Scheduled
</Badge>
On hold
<Badge type="soft" color="accent">On hold</Badge>
Declined
<Badge type="soft" color="error">Declined</Badge>
Expiring
<Badge type="soft" color="warning">
  Expiring
</Badge>
Props
type:"solid" | "soft" | "surface" | "outline"= "solid"
Fill/border treatment. All are rounded-full pills.
size:"default" | "sm"= "default"
Label size and padding.
color:"neutral" | "success" | "primary" | "accent" | "error" | "warning"= "neutral"
Semantic status color. Applies to solid and soft; surface/outline stay neutral.
icon:IconDefinition
Optional leading glyph.
Tokens