Components
Badge
A compact label chip with variant styles for status, category, and feedback indicators.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add badge to your project.
watermelon add badge2
Install manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install class-variance-authority3
Import the component
Import Badge from your local UI registry output.
Import
import { Badge } from "@/components/ui/badge";Import
Import
import { Badge } from "@/components/ui/badge";
import { Text } from "@/components/ui/text";Usage
The Badge component composes a View wrapper and a Text child via the TextClassContext for seamless variant-matched text styles.
Variants
Choose from default, secondary, destructive, and outline.
Loading...
With Status Text
Use badges inline to indicate statuses on list items or cards.
In ProgressShipped
API Reference
Badge extends View props and adds a variant prop for visual style.
| prop | type | default | description |
|---|---|---|---|
| variant | "default" | "secondary" | "destructive" | "outline" | "default" | Controls the background, border, and text color of the badge. |
| children | ReactNode | - | Content inside the badge — typically a Text component. |
| className | string | - | Extends the NativeWind classes applied to the badge container. |