​
Overview

Badge is a React Native component for displaying brief labels or tags with optional variants. It provides quick style customization through the variant prop, automatically adapting to the device’s current color scheme. If you want to control style using Tailwind CSS classes, use the containerClasses and labelClasses props.

​
Preview

Light mode

Dark mode

​
Installation

Include the Badge.tsx file in your React Native project. File Link

​
Properties

  • label: string (required) - The text displayed inside the badge.
  • containerClasses?: string (optional) - The classes for the parent container (overrides variant).
  • labelClasses?: string (optional) - The classes for the label’s text.
  • variant?: Variant (optional) - The variant of the badge. Can be one of ‘default’, ‘secondary’, ‘destructive’, or ‘success’.

Note: The variant property determines the background color of the badge. The color scheme (light/dark mode) is automatically detected.

​
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" containerClasses="px-4 py-3 rounded-md" />
<Badge label="Accepted" labelClasses="font-semibold text-lg" />
ButtonCard