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.

• Preview
• Code

Light mode

Dark mode

Light mode

Dark mode

<View className="flex flex-row gap-2">
  <Badge label="Badge" />
  <Badge label="Badge" variant="secondary" />
  <Badge label="Badge" variant="destructive" />
  <Badge label="Badge" className="bg-amber-400 dark:bg-amber-600" />
  <Badge label="Badge" variant="success" />
</View>

Installation

• CLI
• Manual

npx nativecn-ui add Badge 

npx nativecn-ui add Badge 

1

First Step

Include Badge.tsx in your project.

2

Second Step

Update the import paths to match your project setup.

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" />