Badge
A small status label used to display counts, states, or categories.
Import
tsx
import { Badge } from '@tac-ui/native';Playground
Interactively configure the Badge props below.
Badge
tsx
<Badge variant="default">Badge</Badge>Variants
Eight semantic variants cover the full range of status communication from neutral to critical.
Default
Secondary
Outline
Destructive
Success
Error
Warning
Info
tsx
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>Interactive
Set interactive or provide an onPress handler to make the badge tappable with press feedback. Useful for filterable tag chips.
Clickable
Filter
Status
tsx
<Badge variant="default" interactive onPress={() => console.log('pressed')}>Clickable</Badge>
<Badge variant="outline" interactive onPress={() => console.log('filter')}>Filter</Badge>
<Badge variant="success" onPress={() => console.log('status')}>Status</Badge>Count
Pass a numeric count prop to display a number inside the badge. The count animates with a spring scale effect whenever the value changes.
3
12
99
tsx
<Badge variant="default" count={3} />
<Badge variant="info" count={12} />
<Badge variant="destructive" count={99} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "destructive" | "success" | "error" | "warning" | "info" | "default" | Visual style of the badge. |
| count | number | - | Numeric count displayed inside the badge. Animates with a spring scale when the value changes. |
| interactive | boolean | false | When true, renders as a Pressable with press feedback animation. Automatically enabled when onPress is provided. |
| onPress | () => void | - | Press handler. Implicitly enables interactive mode when set. |
| children | React.ReactNode | - | Content displayed inside the badge. Strings are automatically wrapped in a styled Text component. |
| style | ViewStyle | - | Additional React Native style applied to the badge container. |