Badge

A small pill that labels a status or a count, in the style's variants.

Installation

bash

pnpm dlx shadcn@latest add @zui/badge

bash

pnpm dlx shadcn@latest add @zui/badge

The CLI writes components/ui/badge.tsx, installs Text, Icon and Utils, and adds class-variance-authority.

tsx

import { Badge } from '@/components/ui/badge';
import { Text } from '@/components/ui/text';

tsx

<Badge variant="secondary">
  <Text>New</Text>
</Badge>

The label goes in as a Text child, which takes the text classes of the variant. An Icon child is drawn at 12px.

Takes every prop of React Native's View, plus:

Prop	Type	Default
`variant`	`'default' \| 'secondary' \| 'destructive' \| 'outline' \| 'ghost' \| 'link'`	`'default'`

The view classes of each variant, for a view that is not a Badge but should look like one. badgeTextVariants gives the matching label classes.