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

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

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