Skip to main content

​
Badge

The Badge component displays a small status label, tag, or count. It’s commonly used for status indicators, categories, notification counts, or labels.

​
Props

PropTypeDefaultDescription
textstringRequiredText to display inside the badge
variantstring"default"Color variant: default, primary, success, warning, error, info
sizestring"md"Size: sm, md, lg
outlinebooleanfalseOutline style (transparent background with border)
iconstring-Icon name to display before the text
colorstring-Custom background color (overrides variant)
textColorstring-Custom text color
borderColorstring-Custom border color (for outline style)
radiusstring | number"full"Border radius: sm, md, lg, full, or number

​
Variants

  • "default" - Neutral gray background
  • "primary" - Brand color background
  • "success" - Green/success color
  • "warning" - Yellow/warning color
  • "error" - Red/error color
  • "info" - Blue/info color

​
Sizes

  • "sm" - Small (padding: 2/6, font: 11px)
  • "md" - Medium (padding: 4/8, font: 12px) - default
  • "lg" - Large (padding: 6/10, font: 14px)

​
Examples

​
Basic Badges

<Row gap="sm">
  <Badge text="Default" />
  <Badge text="Primary" variant="primary" />
  <Badge text="Success" variant="success" />
  <Badge text="Warning" variant="warning" />
  <Badge text="Error" variant="error" />
  <Badge text="Info" variant="info" />
</Row>

​
Outline Style

<Row gap="sm">
  <Badge text="Default" outline />
  <Badge text="Primary" variant="primary" outline />
  <Badge text="Success" variant="success" outline />
  <Badge text="Warning" variant="warning" outline />
  <Badge text="Error" variant="error" outline />
</Row>

​
Custom Colors

{/* Custom solid badge */}
<Badge text="Custom" color="#8B5CF6" textColor="#FFFFFF" />

{/* Custom outline badge */}
<Badge
  text="Purple"
  outline
  color="#8B5CF6"
/>

{/* Multiple custom badges */}
<Row gap="sm">
  <Badge text="Teal" color="#14B8A6" />
  <Badge text="Pink" color="#EC4899" />
  <Badge text="Orange" color="#F97316" />
</Row>

​
Sizes

<Row gap="sm" align="center">
  <Badge text="Small" size="sm" variant="primary" />
  <Badge text="Medium" size="md" variant="primary" />
  <Badge text="Large" size="lg" variant="primary" />
</Row>

​
With Icons

<Row gap="sm">
  <Badge text="New" icon="sparkles" variant="primary" />
  <Badge text="Verified" icon="check" variant="success" />
  <Badge text="Alert" icon="alert-triangle" variant="warning" />
</Row>

​
Custom Border Radius

<Row gap="sm">
  <Badge text="Pill" radius="full" variant="primary" />
  <Badge text="Rounded" radius="lg" variant="primary" />
  <Badge text="Subtle" radius="md" variant="primary" />
  <Badge text="Sharp" radius="sm" variant="primary" />
</Row>

​
Common Patterns

​
Status Indicators

<Row gap="sm">
  <Badge text="Active" variant="success" />
  <Badge text="Pending" variant="warning" />
  <Badge text="Inactive" variant="default" />
  <Badge text="Failed" variant="error" />
</Row>

​
Tags/Categories

<Row gap="sm" wrap>
  <Badge text="React" color="#61DAFB" textColor="#000" />
  <Badge text="TypeScript" color="#3178C6" />
  <Badge text="Node.js" color="#339933" />
  <Badge text="GraphQL" color="#E10098" />
</Row>

​
Item Card with Badge

<Card>
  <Row gap="md" align="start">
    <Image src="https://example.com/product.jpg" size="lg" />
    <Col gap="xs" flex={1}>
      <Row justify="space-between" align="center">
        <Title value="Product Name" size="sm" />
        <Badge text="In Stock" variant="success" size="sm" />
      </Row>
      <Text value="Product description goes here" color="muted" />
      <Text value="$99.99" weight="bold" />
    </Col>
  </Row>
</Card>

​
Notification Count

<Row gap="sm" align="center">
  <Icon name="bell" size="lg" />
  <Badge text="5" variant="error" size="sm" />
</Row>

​
Priority Labels

<Row gap="sm">
  <Badge text="P0 - Critical" variant="error" />
  <Badge text="P1 - High" variant="warning" />
  <Badge text="P2 - Medium" variant="info" />
  <Badge text="P3 - Low" variant="default" />
</Row>