---
title: Badge
description: A small status descriptor for labeling and counts.
---
import Source from './_generated/badge.mdx';

A small status descriptor for labels and counts, in a set of semantic variants.

<DemoFrame component="badge" />

## Installation

```bash
npx touchcn add badge
```

## Usage

<CodeGroup>

```html Angular
<tcn-badge variant="primary">New</tcn-badge>
<tcn-badge variant="success">Active</tcn-badge>
```

```tsx React
import { TcnBadge } from '@/components/ui/badge';

<TcnBadge variant="primary">New</TcnBadge>
<TcnBadge variant="success">Active</TcnBadge>
```

```vue Vue
<script setup lang="ts">
import { TcnBadge } from '@/components/ui/badge';
</script>

<template>
  <TcnBadge variant="primary">New</TcnBadge>
  <TcnBadge variant="success">Active</TcnBadge>
</template>
```

</CodeGroup>

## Props

| Prop      | Type                                                              | Default     | Description   |
| --------- | ---------------------------------------------------------------- | ----------- | ------------- |
| `variant` | `'primary' \| 'secondary' \| 'success' \| 'destructive' \| 'neutral'` | `'primary'` | Visual style. |

<Source />