---
title: "Badge"
description: "Displays a badge"
component: true
---

<ComponentExample name="badge-demo" />

## Usage

---

```tsx
import { Badge } from "@medusajs/ui"
```

```tsx
<Badge>Badge</Badge>
```

## API Reference

---

<ComponentReference mainComponent="Badge" />

## Examples

---

### Grey

<ComponentExample name="badge-grey" />

### Red

<ComponentExample name="badge-red" />

### Green

<ComponentExample name="badge-green" />

### Blue

<ComponentExample name="badge-blue" />

### Orange

<ComponentExample name="badge-orange" />

### Purple

<ComponentExample name="badge-purple" />

### Small

<ComponentExample name="badge-small" />

### Large

<ComponentExample name="badge-large" />

### Rounded Full

<ComponentExample name="badge-rounded-full" />

### Rounded Base

<ComponentExample name="badge-rounded-base" />