Data display
Badge
Available forNativeWeb
tag/pill/count · tint with semantic classes
Usage
Tint with a semantic class (bg-success + text-success-foreground), never a raw colour.
API
<Badge variant="default|secondary|destructive|outline"><Text /></Badge>Get it
Already in every copy of the native kit:
import { Badge } from '@/components/ui/badge';Details
- Exports
Badge- Packages
- @rn-primitives/slot@^1.5.2, class-variance-authority@^0.7.1
- Installs with
- @kit-native/lib-utils, @kit-native/text
- Also searched as
- tag, chip, pill, count, status
- Registry JSON
- /r/native/badge.json
API
<Badge variant?>Label</Badge>Get it
Already in every copy of the web kit:
import { Badge, badgeVariants } from '@/components/ui/badge';Details
- Exports
Badge,badgeVariants- Packages
- class-variance-authority@^0.7.1, cn@^0.4.0, radix-ui@^1.7.0
- Also searched as
- tag, pill, status
- Registry JSON
- /r/web/badge.json
Agents: the whole registry is at /llms.txt.