​
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.

Light mode

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