Components
Badge
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 (overridesvariant
).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" />