Badge

Display

A compact inline label with 6 semantic variants, 3 sizes, dot indicator, count overflow, and a dismissible variant.

Installation

bash

npx native-mate add badge

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Badge } from '~/components/ui/badge'

<Badge>Default</Badge>
<Badge variant="success" dot>Active</Badge>
<Badge variant="destructive" count={5} />
<Badge variant="secondary" onDismiss={() => {}} size="lg">Dismissible</Badge>

Props

Prop	Type	Default	Description
variant	"default" \| "secondary" \| "outline" \| "success" \| "destructive" \| "warning"	"default"	Visual variant.
size	"sm" \| "md" \| "lg"	"md"	Controls padding and font size.
dot	boolean	false	Shows a coloured dot before the label.
count	number	—	Numeric count to display instead of children.
maxCount	number	99	When count exceeds this, shows "{maxCount}+".
onDismiss	() => void	—	When provided, shows a × button to dismiss the badge.
children	React.ReactNode	—	Badge label content.

Example

tsx

import { Badge } from '~/components/ui/badge'
import { View } from 'react-native'

export function BadgeExamples() {
  return (
    <View style={{ gap: 12, padding: 16 }}>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }}>
        <Badge>Default</Badge>
        <Badge variant="secondary">Secondary</Badge>
        <Badge variant="outline">Outline</Badge>
        <Badge variant="success" dot>Active</Badge>
        <Badge variant="destructive" dot>Failed</Badge>
        <Badge variant="warning">Warning</Badge>
      </View>
      <View style={{ flexDirection: 'row', gap: 8 }}>
        <Badge variant="destructive" count={3} />
        <Badge variant="default" count={150} maxCount={99} />
      </View>
    </View>
  )
}

Input

Sheet