Components
Badge
Overview
Badge
is a React Native component for displaying brief labels or tags with optional variants. If you
want to control style using Tailwind CSS classes, use the className
and labelClasses
props.
![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/badges-light.png)
Light mode
![](https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/badges-dark.png)
Dark mode
Installation
npx nativecn-ui add Badge
Properties
label: string
(required) - The text displayed inside the badge.labelClasses?: string (optional)
- The classes for the label’s text.className?: string (optional)
- The classes for the parent container.variant?: Variant
(optional) - The variant of the badge. Can be one of ‘default’, ‘secondary’, ‘destructive’, or ‘success’.
Usage
Basic usage with variant
<Badge label="New" />
<Badge label="Archived" variant="secondary" />
<Badge label="Error" variant="destructive" />
<Badge label="Accepted" variant="success" />
Basic usage with custom classes
<Badge label="New" className="bg-amber-400" />
<Badge label="Accepted" labelClasses="font-semibold text-lg" />