> ## Documentation Index
> Fetch the complete documentation index at: https://nativecn.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Tabs>
  <Tab title="Preview">
    <div style={{ display: 'flex', justifyContent: 'center', gap: '20px' }}>
      <div>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/badges-light.png" />

        <p>Light mode</p>
      </div>

      <div>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/badges-dark.png" />

        <p>Dark mode</p>
      </div>
    </div>
  </Tab>

  <Tab title="Code">
    ```jsx theme={null}
    <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>
    ```
  </Tab>
</Tabs>

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx nativecn-ui add Badge 
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="First Step">
        Include [Badge.tsx](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/components/Badge.tsx) in your project.
      </Step>

      <Step title="Second Step">
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## 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`

```jsx theme={null}
<Badge label="New" />
<Badge label="Archived" variant="secondary" />
<Badge label="Error" variant="destructive" />
<Badge label="Accepted" variant="success" />
```

### Basic usage with custom classes

```jsx theme={null}
<Badge label="New" className="bg-amber-400" />
<Badge label="Accepted" labelClasses="font-semibold text-lg" />
```