Skip to main content

​
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

​
Installation

  • CLI
  • Manual
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" />
⌘I