title: Badge

Badge

Small label for status, category, or count.

Usage

<View className="bg-accent rounded-full px-2 py-1">
  <Text className="text-accent-foreground text-xs font-bold uppercase">New</Text>
</View>

Variants

Intent	Classes
Default	`bg-muted text-muted-foreground`
Accent	`bg-accent text-accent-foreground`
Success	`bg-success text-success-foreground`
Destructive	`bg-destructive text-destructive-foreground`

With count

<View className="relative">
  <Icon name="cart" />
  <View className="absolute -top-1 -right-1 bg-accent rounded-full h-5 min-w-5 items-center justify-center">
    <Text className="text-accent-foreground text-xs font-bold">{count}</Text>
  </View>
</View>